jQuery how to use .find

<table id="myTable">
    <tr id="myRow1">
        <td>hi</td>
        <td>hello</td>
        <td>comeon</td>
    </tr>
</table>

1. In the above scenario, what's the difference between

   $("#myTable").find('tr')

   and

   开发者_StackOverflow中文版$("#myTable").find('tr')[0] or $("#myTable").find('tr').get(0)?

2. Also given $("#myTable").find('tr')[0], how do I get the number of tds under it?

Thanks.

You should not use the [i] or .get(i) syntax unless you really have to, those are ways of accessing the underlying elements within the jQuery object.

The jQuery object is designed to be a wrapper around the elements.

.find() is a jQuery function, it only works on jQuery objects. If you extract the underlying element, it is no longer a jQuery object, just a regular element, so you can not use .find() on it.

If you need the first element only, then use the jQuery filter to get that, leaving the result as a jQuery object. Also, you only really need to use .find() if you are using the part before separately first.

These are the same:

$('#myTable').find('tr:first').find('td');
$('#myTable tr:first td');

Comeonman, if you want $("#myTable").find('tr')[0].find('td') to work, use this:

$($("#myTable").find('tr')[0]).find('td') // should work

$(an_obj) will convert the an_obj into a jquery object

$("#myTable").find('tr')

will query all tr elements in the table #myTable and returns them in a jQuery wrapped set.

$("#myTable").find('tr')[0]

will query all tr elements in the same table, but returns the first DOM element (not the jQuery object)

$("#myTable").find('tr').get(0)

the exact same as above.

As I mentioned above, $("#myTable").find('tr')[0] returns a DOM element. You would need native Javascript & DOM functions to grab all <td> nodes. Doing it with jQuery would look like

$("#myTable").find('td').length

will return the number of <td> nodes in the whole table.

Also given $("#myTable").find('tr')[0], how do I get the number of 'td' s under it?

Since you're referencing a DOM element, use the native cells property.

var len = $("#myTable").find('tr')[0].cells.length;

When using jQuery selectors, you're getting back a wrapped set of DOM elements, not just a simple array. When you use [0] to select a single element, you lose the wrapper and can no longer use jQuery methods on that element. If you want to retrieve the first row in a table, you can do so by using the :first selector.

$("#mytable").find('tr:first')

This will provide you with a wrapped set consisting of just the first tr element in your table. To get the number of td elements in that tr, you can use the size() method.

$("#mytable").find('tr:first').find('td').size()

I don't have time to test this right now, but it looks right. If it doesn't work for you, please let me know and I'll update as needed.

1. The difference is that in the first selector you're actually selecting all <tr> elements in #myTable, and in the second and third, you're just selecting the first index in that that same array, which will always be one <tr> element (although it may have an arbitrary n children)

2. $("#myTable").find('tr').eq(0).children('td').length

Note that in #2 ... you're only going to select the <td> children of the first <tr> element that are in the $("#myTable").find('tr') selector. The easiest way of selecting all of the <td> elements in a table is: $("#myTable").find('td') ... if that's what you're trying to do.