jquery选择器查找子元素答案

【问题标题】：jquery selector to find a child element withjquery选择器查找子元素
【发布时间】：2011-10-26 23:39:06
【问题描述】：

已经用谷歌搜索和试错了一个小时，试图提出一个 jquery 选择器来访问可扩展树中的几个标签元素之一。 html是这样的：

<span id="ppown" class="treeTitleSpan" role="leaf">PPO</span> 
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />

或者像这样：

<span id="ppw" class="treeTitleSpan" role="leaf">Other</span> 
<span class="handle closed"></span>
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />

在每种情况下，我都是从 .treeTitleSpan 跨度开始的（在点击处理程序中）。我知道我可以通过以下方式访问：

$(this).next().next().children('.nodeCheckIcon');

另一个是：

$(this).next().children('.nodeCheckIcon');

但我想要一个适用于两种情况的选择器，“查找”似乎不起作用：

$(this).find('.nodeCheckIcon:first')

任何帮助将不胜感激。

瑞克

【问题讨论】：

标签： jquery jquery-selectors find

【解决方案1】：

$(this).nextAll('.treeCheckBoxLabel').children('.nodeCheckIcon');

或者，如果您可能有多个标签，例如：

<span id="ppw" class="treeTitleSpan" role="leaf">Other</span> 
<span class="handle closed"></span>
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />
</span>
<span class="treeCheckBoxLabel"> 
    <label class='nodeCheckIcon'  />
</span>

而你只想要第一个：

$(this).nextAll('.treeCheckBoxLabel').first().children('.nodeCheckIcon');

【讨论】：

【解决方案2】：

这样的事情怎么样：

$(this).nextAll('.treeCheckBoxLabel:first').children('.nodeCheckIcon');

使用:first 可确保您最多只能选择一个.treeCheckBoxLabel，这可能是也可能不是问题，具体取决于HTML 的其余部分。

【讨论】：

【解决方案3】：

其他帖子的替代品（给猫剥皮的多种方法:)）

$(this).siblings(".treeCheckBoxLabel:has(label.nodeCheckIcon):first")

【讨论】：

【解决方案4】：

由于this 指向span 元素，它是label 的父元素的兄弟，$(this).find('.nodeCheckIcon:first') 将不起作用。我不知道你的完整标记结构，但如果你有这个 span 元素的包装容器，那么你可以试试这个

$(this).parent().find('.nodeCheckIcon:first');

【讨论】：