使用 jquery 隐藏列表中的所有 li，但不隐藏具有类名“matter”的 li答案

【问题标题】：Hide all li in list but not that li who has class name "matter" using jquery使用 jquery 隐藏列表中的所有 li，但不隐藏具有类名“matter”的 li
【发布时间】：2018-09-21 15:35:28
【问题描述】：

我有一个列表，所以当我点击按钮时，它应该隐藏所有 li，但不隐藏具有类名“matter”的 li，所以如何使用 jquery 仅使用类名来做到这一点。

<ul class="sub-menu">        
  <li >list 1</li>
  <li class="matter">list 2</li>
  <li >list 3</li>
  <li >list 4</li>
</ul>
<button name="btn" class="btn_click">Click me</button>
$(".btn_click").on('click', function() { 

// here code that will hide all li but not that li who has class name 'matter'
});

【问题讨论】：

标签： jquery

【解决方案1】：

您可以简单地使用 jQuery 选择器 :not，或 jQuery 方法 .not()，例如：

$('.sub-menu li:not(.matter)').hide();
//Or
$('.sub-menu li').not('.matter').hide();

$(".btn_click").on('click', function() {
  $('.sub-menu li:not(.matter)').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="sub-menu">
  <li>list 1</li>
  <li class="matter">list 2</li>
  <li>list 3</li>
  <li>list 4</li>
</ul>

<button name="btn" class="btn_click">Click me</button>

【讨论】：

【解决方案2】：

这是一个非常简单的概念。获取对所有 li $(".sub-menu").find('li') 的引用，然后排除您不需要的 .not(".matter") 并隐藏其余部分。

$(".btn_click").on('click', function() {
  $(".sub-menu").find('li').not(".matter").hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="sub-menu">
  <li>list 1</li>
  <li class="matter">list 2</li>
  <li>list 3</li>
  <li>list 4</li>
</ul>
<button name="btn" class="btn_click">Click me</button>

至于为什么我在这里选择不使用:not()，我只是觉得这样更容易阅读和维护。

至于$(".sub-menu").find('li')选择https://stackoverflow.com/a/16423239/125981

替代使用.filter()

$(".sub-menu").find('li').filter(":not(.matter)").hide();

【讨论】：