Question

可能重复：
jQuery filtering selector to remove nested elements matching pattern.

我有一个群组层次结构。类似的东西：

<div class="group">
    <span class="child"></span>
    <div class="group">
        <span class="child"></span>
        <span class="child"></span>
        <span class="child"></span>
    </div>
    <span class="child"></span>
    <span class="child"></span>
    <div>This child is farther down <span class="child"></span></div>
</div>

如何在不选择任何子组的子项的情况下选择每个组中的子项？

$(".group").each(function() {
    // Wrong, click fires twice (the 1st level group selects 2nd level children)
    var children = $(this).children(".child");

    // Wrong, click fires twice
    children = $(this).children(":not(.group) .child");

    // How can I properly do this??

    children.click(function() {
        alert("children.click");
    });
});

我也尝试了find()而不是children()，但我似乎无法让它正常工作。此外，我不能使用直接子项（或>），因为后代可能在其他非.gorup HTML标记内（即几个DOM级别）。

Answer 1

如果您只想要一个小组的直接孩子，您可以尝试以下方式：

$('.group > .child').click(function(){
    alert('You clicked on: '+$(this).text());
});

请参阅jQuery: child-selector

上的文档

编辑：否则您可能想查看gnarf发布的duplicate question

Answer 2

如果.child始终是其组的直接后代，则>选择器将起作用，如上所述。否则，您可以使用函数

过滤设置

var group = this;
$(group).find('.child').filter(function() {
    // check if current element belongs to our group
    return $(this).closest('.group')[0] == group;
})

An example

Answer 3

试试这个，它也非常易读：

$(".group").each(function() {
  var allChilds = $(this).find('.child');
  var subChilds = $(this).find('.group .child');

  var firstChilds = allChilds.not(subChilds);
  firstChilds.css({ color: 'red' });
});

jQuery - 选择不包含在另一个类中的类

3 个答案: