Question

我正在尝试选择父div中具有“选定”类的所有元素。它必须只是这个div中的元素，因为html中的元素也有这个类但我们不想影响它们。

<div id=1>
    <ul>
        <li class="list all">ALL</li>
        <li class="list selected">1</li>
        <li class="list">2</li>
    </ul>
    <ul>
        <li class="list">3</li>
        <li class="list selected">4</li>
    </ul>
    <ul>
        <li class="list selected">5</li>
        <li class="list selected">6</li>
    </ul>
</div>
<div id=2>
    <ul>
        <li class="list all">ALL</li>
        <li class="list">1</li>
        <li class="list">2</li>
    </ul>
    <ul>
        <li class="list selected">3</li>
        <li class="list">4</li>
    </ul>
    <ul>
        <li class="list">5</li>
        <li class="list selected">6</li>
    </ul>
</div>

所以当点击“all”类时，我们想要从同一div中的所有元素中删除“selected”类。这跟我一样接近，但似乎没有用。

$('.all').click(function(){
        $('.selected').each(function(){$(this).closest('div').find('.selected').removeClass('selected');});     
        $(this).addClass('selected');
})

我认为我的每个循环可能都是错误的，我不知道如何在包含div中进行每个循环。

Answer 1

尝试此操作：您可以获取其父.selected，然后找到div的所有元素，以删除class="selected"类，而不是过滤每个selected。

$('.all').click(function(){
  $(this).closest('div').find('.selected').removeClass('selected');             
  $(this).addClass('selected');
});

<强> Working JSFiddle

Answer 2

点击中的$('.selected')代码未被父级过滤。它的作用是找到div，它是每个 .selected匹配的父级，并删除该类。这实际上是一个更简单的解决方案：

$('.all').click(function() {
  $('.selected', $(this).closest('div')).removeClass('selected');
  $(this).addClass('selected');
});

Answer 3

您可以使用：

$('.all').click(function(){
   $(this).closest('div').find('.selected').removeClass('selected');
   $(this).addClass('selected');
});

查找具有特定类的div中的所有元素

3 个答案: