用于查找子元素的jquery选择器

Posted 2021-04-13

一直在谷歌搜索和试错一小时试图找到一个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');

但我想要一个适用于这两种情况的选择器，'find'似乎不起作用：

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

任何帮助，将不胜感激。

干草堆

答案

$(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');

另一答案

这样的事情怎么样：

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

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

另一答案

替代其他帖子（许多方式给猫皮肤:) :)

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

另一答案

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

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