[英]How to add class to all li but not to clicked li using jquery
I want to add a hidden
class to all li
but not to the li
which was clicked. 我想向所有li
添加一个hidden
类,但不向单击的li
添加一个hidden
类。 How can I do this using jQuery? 我该如何使用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');
});
Firstly note that your class
in the HTML is render-menu
, yet the JS was using render_menu
. 首先请注意,HTML中的class
为render-menu
,而JS使用的是render_menu
。 You need to make them consistent. 您需要使它们一致。
With regard to the issue, you're adding the class to the parent()
of the li
, ie. 关于这个问题,您要将类添加到li
的parent()
中。 the ul
, so all the child elements are being affected by the class. ul
,因此所有子元素都受到该类的影响。 To fix this, use siblings()
to get all the li
elements you require before calling addClass()
. 要解决此问题,请在调用addClass()
之前使用siblings()
获取所需的所有li
元素。 Try this: 尝试这个:
$(".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>
Change your JS code to below 将您的JS代码更改为以下内容
jQuery(".render_menu li").on('click', function () {
alert();
jQuery(".render_menu li").not($(this)).addClass('hidden');
});
You are comparing ul
instead of li
to add class 您正在比较ul
而不是li
添加类
You can try the following 您可以尝试以下
$('.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.