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.