jquery：children（）vs child selector“＆gt;”

Question

我有一个表格，其部分类似于以下内容：

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

我的$（this）设置为tr元素，我正在尝试访问具有“myclass”类集的Span元素。 以下似乎有效：

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。

documentation对此也很清楚：

  

获取匹配元素集中每个元素的子元素，可选择通过选择器进行过滤。

---

您可能想要的是.find()：

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

它会返回与选择器匹配的所有后代，而不仅仅是子项。

Answer 2

来自jQuery文档：

“.find（）和.children（）方法类似，只是后者只沿DOM树向下移动一层。”

我建议使用它：

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

干杯

Answer 3

我解释了这个here。

不同之处在于第一个选择器完全在children调用内，而第二选择器则不在。{/ p>

因此，第一个查找this的所有与td > span匹配的子项。 （换句话说，<span> s } （选择器）的所有 { <td>子项本身就是{{1}的直接子项}）

第二个会找到this的所有<td>个孩子，然后找到这些this中的所有<span>个。