Jquery 单击并在不同的 ul 但相同的 class 名称中添加 Active

Question

我有很多菜单 UL 元素和相同的 class 名称，

如何为ul children's li click and add class "active" which clicked, click other li inside the same ul will remove active and add the active class点击li，我试了google一段时间，没找到解决办法，谢谢

    jQuery(".uls").each(function(index){

    jQuery(this).children('.btn.btn-primary').on("click", function(){
        jQuery('.btn.btn-primary').removeClass('active');
        jQuery(this).addClass('active');
    });     


});

HTML:

<ul class="uls">
<li class="btn btn-primary"></li>
<li class="btn btn-primary"></li>
<li class="btn btn-primary"></li>
<li class="btn btn-primary"></li>
</ul>

<ul class="uls">
<li class="btn btn-primary"></li>
<li class="btn btn-primary"></li>
<li class="btn btn-primary"></li>
<li class="btn btn-primary"></li>
</ul>

Answer 1

你可以在 $.fn.siblings 方法的帮助下做这样的事情：

$('.uls').on('click', '.btn', function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});

.active {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="uls">
  <li class="btn btn-primary">one</li>
  <li class="btn btn-primary">two</li>
  <li class="btn btn-primary">three</li>
  <li class="btn btn-primary">four</li>
</ul>

<ul class="uls">
  <li class="btn btn-primary">one</li>
  <li class="btn btn-primary">two</li>
  <li class="btn btn-primary">three</li>
  <li class="btn btn-primary">four</li>
</ul>

Jquery 单击并在不同的 ul 但相同的 class 名称中添加 Active

Jquery click and add Active in different ul but same class name

each

jquery