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

Question

我想向所有li添加一个hidden类，但不向单击的li添加一个hidden类。 我该如何使用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');
});

Answer 1

首先请注意，HTML中的class为render-menu ，而JS使用的是render_menu 。 您需要使它们一致。

关于这个问题，您要将类添加到li的parent()中。 ul ，因此所有子元素都受到该类的影响。 要解决此问题，请在调用addClass()之前使用siblings()获取所需的所有li元素。 尝试这个：

 $(".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> 

Answer 2

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

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

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

        });

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

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>