Question

Is there a bug in how jQuery handles child selectors or am I missing out on something obvious? I can’t get it to work when the child is anything other than *.

Here’s the jQuery selector I am running:

$("#myTable > tr").each(function() {
    // do somthing }
);

And the table structure is:

<table id="myTable">
    <tr>
        <td><button>someButton</button></td>
        <td><textarea>...</textarea></td>
    </tr>
</table>

No elements are matched with the above selector #myTable > tr. But the two selectors listed below work fine.

$("#myTable tr") // search all descendants for tr

or use a wildcard to match children:

$("#myTable > *") // search all child elements

Any ideas on what could be wrong here?

Thanks for the rapid answers guys! Unfortunately can only select one.

Answer 1

Its because Firefox automatically adds tbody elements around your tr elements if none are supplied. You really can’t use table > tr.

You have:

<table id="myTable">
    <tr>
        <td><button>someButton</button></td>
        <td><textarea>...</textarea></td>
    </tr>
</table>

But Firefox sees this:

<table id="myTable">
  <tbody>
    <tr>
        <td><button>someButton</button></td>
        <td><textarea>...</textarea></td>
    </tr>
  </tbody>
</table>

Other elements will work just fine:

<div>
  <strong>Hi</strong>
</div>

And the selector:

alert( $("div > strong").text() ); // Alerts "Hi"