Jquery 查找具有 class 的列表元素并隐藏其他所有内容

Question

我想创建一个 jquery 过滤器来查找具有特定 class 的列表元素，然后隐藏（所有其他列表元素）

下面的代码找到带有 class 的 li 项目并隐藏它们 - 但我想做相反的事情。（不太确定该怎么做）

这是我设置的 jsfiddle。非常感谢您的帮助

$(document).ready(function() {
  $('.mbodysub').on('click', '#editfilter', function(e) {
     console.log('filter clicked');
     
     //want to do the opposite, just show li where child div has .editcolor class
     $('.mbodysub ul').find(".editcolor").parent('li').toggle();

   })
   $('.mbodysub').on('click', '#tsfilter', function(e) {
     console.log('filter clicked');
     $('.mbodysub ul').find(".tscolor").parent('li').toggle();

   })
   $('.mbodysub').on('click', '#rolefilter', function(e) {
     console.log('filter clicked');
     $('.mbodysub ul').find(".rolecolor").parent('li').toggle();

   })
   });

这是一个典型的列表元素

<li id="194" class="external changecss">
          <div class="acl_title" style="overflow:hidden">
            <div id="2137" class="remove">[X]</div>
            <img style="float:left" src="/images/user32.png" width="32" height="32">
            <h3>Jeff Bloggs</h3>
            <p>Program Manager</p>
          </div>
          <div class="colorline editor editcolor"></div>
          <div class="colorline ts"></div>
          <div class="colorline role rolecolor"></div>
  </li>

Answer 1

您可以通过组合 :not() and :has() 选择器来否定具有 .editcolor 后代的 li 元素：

$('.mbodysub ul li:not(:has(.editcolor))').toggle();

Answer 2

与其他答案类似。

$('li').not('.editcolor').toggle();

找到所有 li 元素，过滤掉所有 class 为 'editcolor' 的元素，然后切换剩余元素。

Jquery 查找具有 class 的列表元素并隐藏其他所有内容

Jquery Find list elements with class and hide everything else

jquery

list

find