如何使用jQuery将类添加到所有li但不添加到所点击的li？

Question

我想给所有的 li 添加一个 hidden 类，但不包括被点击的 li。请问如何使用jQuery实现这个效果？

<ul class="render-menu">        
  <li class="font-size">list 1</li>
  <li class="font-size">list 2</li>
  <li class="font-size">list 3</li>
  <li class="font-size">list 4</li>
</ul>

jQuery(".render_menu li").on('click', function() { 
  alert();
  jQuery(".render_menu").not($(this)).parent().addClass('hidden');
});

- Anonymous

Answer 1

首先注意你在HTML中的class是“render-menu”，但是JS使用的是“render_menu”。你需要使它们保持一致。

关于问题，你正在将类添加到li的父元素即ul中，因此所有子元素都受到了类的影响。要解决这个问题，请使用siblings()来获取所有所需的li元素，然后才调用addClass()。请尝试这样做：

$(".render-menu li").on('click', function() {
  $(this).siblings().addClass('hidden');
});

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="render-menu">
  <li class="font-size">list 1</li>
  <li class="font-size">list 2</li>
  <li class="font-size">list 3</li>
  <li class="font-size">list 4</li>
</ul>

- Rory McCrossan

---

如果存在多个.render-menu，我会在处理程序中将$（'. render-menu li'）替换为$（this）.closest（'. render-menu'）。find（'li'）。 - Jeto

使用 $(this).siblings().addClass('hidden') 更好。 - Mohammad

@Mohammad 确实 :) - Rory McCrossan

Answer 2

将您的JS代码更改为以下内容

jQuery(".render_menu li").on('click', function () {
            alert();

            jQuery(".render_menu li").not($(this)).addClass('hidden');

        });

您正在比较 ul 而不是 li 来添加类

- Arun Kumar

Answer 3

你可以尝试以下内容。

$('.render-menu li').on('click',function(){
 $('.render-menu li').removeClass('hidden').not(this).addClass('hidden');
});

.hidden{
color:lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="render-menu">

    <li class="font-size">list 1</li>

    <li class="font-size">list 2</li>

    <li class="font-size">list 3</li>

    <li class="font-size">list 4</li>

    </ul>

- Manoz