jquery: children () vs дочерний селектор ">"

Question

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

<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 даст схожие результаты (хотя и разными способами), но, видимо, нет.

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

Спасибо!

Answer 1

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

Документация также довольно ясно говорит об этом:

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

---

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

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

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

Answer 2

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

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

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

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

Cheers

Answer 3

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

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

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

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