Jquery: children() vs child selector ">"

У меня есть таблица, которая имеет раздел, похожий на следующий:

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

my $(this) установлен в tr-элемент, и я пытаюсь получить доступ к элементам Span, у которых есть класс класса myclass. Кажется, что работает следующее:

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

но при попытке использовать это:

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

или это:

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

Это не так. Я думал, что любой из вышеперечисленных 2 придумал бы аналогичные результаты (хотя и с помощью разных методов), но, по-видимому, нет.

Что мне здесь не хватает?

Спасибо!

Ответ 1

children(selector) будет соответствовать только тем детям, которые соответствуют selector. Ни один из tr детей (td s) не может соответствовать td > span, поскольку tr не имеет дочерних элементов span, только td и td > span !== td.

Документация также совершенно понятна:

Получить дочерние элементы каждого элемента в наборе согласованных элементов, необязательно отфильтрованных селектором.

Вместо этого вы можете .find():

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

Он возвращает всех потомков, а не только детей, которые соответствуют селектору.

Ответ 2

Из документов jQuery:

". Методы .find() и .children() аналогичны, за исключением того, что последний перемещается только на один уровень вниз по дереву DOM."

Я бы рекомендовал использовать это:

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

Приветствия

Ответ 3

Я объяснил это здесь.

Разница в том, что первый селектор целиком находится внутри вызова children, а второй - нет.

Следовательно, первый ищет всех детей this, которые также соответствуют td > span. (Другими словами, все { <span> дети <td> } (селектор), которые сами являются непосредственно дочерними элементами this)

Второй найдет всех <td> детей this, затем найдет все <span> в этих <td> s.