jquery: children() vs child selector ">"

Question

I have a table that has a section similar to the following:

<tr>
    <td> <span class="myclass"></span>
    </td>
<tr>

my $(this) is set to the tr element and I'm trying to access the Span elements that have the "myclass" class set. The following seems to work:

if ($(this).children('td').children('span').is('.myclass')){
    alert('in here');
}

but when trying to use this:

if ($(this).children("td > span").is('.myclass')){

or this:

if ($(this).children("td span").is('.myclass')){

It does not. I thought that either of the above 2 would come up with similar results (albeit through different methods) but apparently not.

What am I missing here?

Thanks!

Answer 1

children(selector) will only match those children that match selector. None of tr's children (the tds) can match td > span, as tr has has no span child elements, only tds and td > span !== td.

The documentation is also quite clear about this:

Get the children of each element in the set of matched elements, optionally filtered by a selector.

---

What you might want instead is .find():

$(this).find("td > span")

It returns all descendants, not just children, that match the selector.

Answer 2

From the jQuery docs:

"The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree."

I'd recommend using this:

if ($(this).find('.myclass').length){
    alert('in here');
}

Cheers