jquery选择器查找子元素

Posted

技术标签:

【中文标题】jquery选择器查找子元素【英文标题】:jquery selector to find a child element with 【发布时间】: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')

任何帮助将不胜感激。

瑞克

【问题讨论】:

【参考方案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');

【讨论】:

以上是关于jquery选择器查找子元素的主要内容,如果未能解决你的问题,请参考以下文章

JQuery中查找父元素,子元素,追加元素,插入元素和删除元素

jQuery之层次选择器

jquery查找元素

JQuery选择器——子元素筛选选择器和表单元素选择器

jQuery ---[jQuery选择器,jQuery对象的遍历]

JQuery