$.children("selector") vs $("selector", parent) vs "parent > child" selector

I have the开发者_运维技巧 following table structure.

<table id='mytable'>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>
        <table>
            <tr><td>A</td></tr>
            <tr><td>B</td></tr>
            <tr><td>C</td></tr>
        </table>
    </td></tr>
</table>

What I want to do is just getting the direct TR elements from mytable. Obviously, there are 4 direct TR of mytable.

The following shows three statements. I expected they return same result. However they don't.

var mytable$ = $("#mytable");

var trcount1 = mytable$.children("tbody").children().length; // trcount1 = 4
var trcount2 = mytable$.children("tbody > tr").length; // trcount2 = 0
var trcount3 = $("tbody > tr", mytable$).length; // trcount3 = 7

Only the syntax for getting trcount1 is what I wanted.

Why are trcount2 and trcount3 not 4?

Thanks

Alex

===================================

Thanks jfriend00's reply.

That's what I want.

$("> tbody > tr", mytable$).length; // 4
mytable$.find("> tbody > tr").length; // 4

I missed ">" before tbody.

Inside the browser, your DOM actually looks like this (note the automatic inclusion of the <tbody> tags):

<table id='mytable'>
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>
        <table>
          <tbody>
            <tr><td>A</td></tr>
            <tr><td>B</td></tr>
            <tr><td>C</td></tr>
          </tbody>
        </table>
    </td></tr>
  </tbody>
</table>

So, given that, here's how to explain your observations:

var trcount1 = mytable$.children("tbody").children().length; // trcount1 = 4

You're asking for direct children of the table that are tbody and then the children of that. There is one direct child that is a tbody and there are four direct children of that tbody tag so you get 4.

var trcount2 = mytable$.children("tbody > tr").length; // trcount2 = 0

You're asking for direct children of the table (which is only the tbody object) that also match this selector "tbody > tr". Since we're only looking at direct children of the table, this is only the tbody object itself and the tbody object iself doesn't match "tbody > tr" the result is 0 as there are no direct children that match that criteria.

Remember .children() is direct children only. If you want to consider all children and children of children, then you use .find() or just put the tag in the main selector.

var trcount3 = $("tbody > tr", mytable$).length; // trcount3 = 7

Here's you're asking for any tr tag inside of mytable that has a direct parent that's tbody. There are seven of those since all tr tags in mytable match that criteria.

If you want just the tr tags in the first table, I would recommend:

$("#mytable > tbody > tr")   // will be 4

If you want all the tr tags in both tables, I would recommend:

$("#mytable  tr")   // will be 7

If you want just the tr tags in the second table, I would recommend:

$("#mytable table tr")   // will be 3

trcount1 gets all tbodys that are direct descendants of mytable$ and then gets all direct descendants of that which are your four trs.

trcount2 looks for all trs that are a direct descendant of a tbody in the children of mytable$. The children of mytable$ is only the one tbody.

trcount3 looks for all trs that are a direct descendant of a tbody in the context of mytable$. The first four trs are direct descendants of a tbody and the nested trs are also direct descendants of a tbody.