We Keep Coding

why i can't get all first td in one selector in jquery?

why i have to do :
$('.inout tbody').find('tr:first td:first')
//return => Object[td, td, td, td]
instead of
$('.inout tbody tr:first td:first')
//return => Object[td]
why does't have the same result? it's the pseudo element ":first" the problem?
EDIT AWNSER:
The truth response is: :first != :first-child ;)
$('.inout tbody tr:first-child td:first-child')// works !

:first return the first element on the stack. I guess you are looking for every first-child.
Try this :
$('.inout tbody tr:first-child td:first-child')
For reference:
:first-child Selector
While :first matches only a single element, the :first-child selector can match more than one: one for each parent. This is equivalent to :nth-child(1).

You're asking for different things:
$('.inout tbody').find('tr:first td:first')
Is asking for the first td of the first tr for each element in $('.inout tbody').
$('.inout tbody tr:first td:first')
Whereas this is asking for the first td of the first tr out of all of them.
The following selector will return an array of first tds:
$('.inout tbody tr:first-child td:first-child');
This jsFiddle may be useful for verifying this

because your second selector will select :
.inout > tbody > tr:first > td:first'
You should change it to:
$('.inout tbody tr:first , .inout tbody td:first')

How do I use the nth-child selector with jquery's child selector?

This works fine:
$("#element").find("> tr > td > i > a")
But I'm trying to use the nth-child selector to say that I want a specific numbered child. For example, I want:
$("#element").find("> tr > td > i > a:nth-child(3)")
I'm not getting any results. Does anyone have any ideas on how I could select all the nth numbered children? Thanks in advance!

Firstly, this unless there's a great need to do direct descendant (the >) selectors, I don't see the need of including them, you can appropriately shorten your CSS selector too:
//Select 3rd <a> tag, within the context of #element td
$('a:nth-child(3)', '#element td');
//or
$('#element td a:nth-child(3)')
Fiddle: http://jsfiddle.net/KGWuK/
Although, currently your selector provided with the question will only work if your HTML structure is:
<td>
<i>
<a>One</a>
<a>Two</a>
<a>Three</a>
</i>
</td>
Which isn't a very advisable style of markup. That's because the original selector is selecting <a> tags of those that a direct child of the <i>

I would recommend not using find as its not needed:
$("#element > tr > td > i > a:nth-child(3)")
This will find the tag located within the tag located within the table cell within a table row located within the element.
JSFiddle

Seeing that you have only 1 a with no sibling, i guess you are for the fourth element of your stack.
There is a jQuery method for that : .eq() :
$("#element").find("> tr > td > i > a:eq(3)");
or faster :
$("#element").find("> tr > td > i > a").eq(3);

jquery each() doesn't loop through newly added table rows

I have a very simple table
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
when i append another row to the above table with text 5 in td jquery each() doesn't loop through newly added row it returns only predefined elements not the elements dynamically added
$("table > tbody").append("<td>5</td>");
$("table tr td").each(function(){
alert($(this).text());
});
Please see JS FIDDLE LINK HERE

In tbody you cannot append td directly wrap them in tr.
Live Demo
$("table > tbody").append("<tr><td>5</td></tr>");
$("table tr td").each(function(){
alert($(this).text());
});

Your reasoning is incorrect. The reason it doesn't find the element is because your selector doesn't match the nesting of elements that you're appending.
Wrap the td elements in a tr element.

You need to do this:
$("table > tbody").append("<tr><td>5</td></tr>");
$("table tr td").each(function(){
alert($(this).text());
});
The reason is simple you, your original code will produce the new row as <tbody><td>5</td></tbody> without the tr tag that you were looking for in the each function.

get the first tr that contains tds

In jquery how do I get the first table row that contains <td>s
So far my code looks like this but its not working?
$('#mytable tr').has('td:first').html();
thanks

You could find the first td's parent.
$("#mytable td:first").parent().html();

You could try
$($("#mytable").find('tr')[0]).find('td')
In this case you can iterate through rows and fetch the tds
$($($("#mytable").find('tr')[0]).find('td')[0]).text()
$($($("#mytable").find('tr')[0]).find('td')[1]).text()

Try to use this:
$("#mytable td:first ").parents('tr').html();

Try this, jQuery maintains the element indices while selecting them -
$('#mytable td').eq(0).parent();
So in effect, this will select the first td in your table and return the parent, which should be a tr element, by convention

Finding the first div inside a td

I'm pointing at the first div inside my table's td as you can see in the jQuery code below.
$('table tr td div').css("position", "relative");
But I've got some problems with that so I've tried this:
$('table tr td').parents('div:first').css({position:'relative'});
But this one doesn't work fine either. What is wrong with my code?
My HTML structure is:
<table>
<tr>
<td><!-- all id for the div and image inside the td are dynamic -->
<div><!-- Need to access this div -->
<!-- content --->
</div>
</td>
</tr>
</table>

.parents() find all parent of your selection. what you want is a child.
$('table tr td div:first').css("position", "relative");
This will do the trick for you :)
You also might want to select only exact descendants, in that case you can use:
$('table tr td > div:first').css("position", "relative");

You could use below 2 methods if you want to find the occurrence of the first DIV from TD with the class'vx1'
$( "table tr td.vx1 > div:first" ).css( "width", "50" );
You could use below 2 methods if you want to find the occurrence of the first DIV from TH with the class'vx1'
$( "table tr th.vx1 > div:first" ).css( "width", "50" );