2011-04-21 149 views
17

我有了类似于下面一节的表:的jQuery:儿童()与孩子选择“>”

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

我的$(本)被设置为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')){ 

事实并非如此。我认为以上两种中的任何一种都会得出类似的结果(虽然通过不同的方法),但显然不是。

我在这里错过了什么?

谢谢!

回答

19

children(selector)只会匹配那些匹配selector的孩子。没有tr的孩子(td s)可以匹配td > span,因为tr已经没有span子元素,只有td s和td > span !== td

documentation也是关于这很清楚:

获取每个元素的子元素集合中的匹配元素,任选地通过一个选择器过滤的。


什么你可能想的反而是.find()

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

它返回所有后代,不只是孩子,选择匹配。

0

我解释了这个here

区别在于第一个选择器完全在children调用中,而第二个选择器不是。

因此,第一个寻找所有this的孩子,这些孩子也匹配td > span。 (换句话说,(选择所有{<td>小号<span>的孩子}),其本身是this直接孩子)

第二个将找到的this所有<td>孩子,那么发现所有的<span> s在那些<td> s。

1

来自jQuery文档:

“The .find()and。儿童()方法是相似的,但后者只是行进的单级下调DOM树“

我推荐使用这样的:

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

干杯