javascript - 如何将类添加到下两个元素并从当前两个元素中删除？

Question

我想将事件类添加到接下来的两个里，并从当前的这两个事件类中删除。

<ul class="bottomNavi_ul clearfix">
    <li class="active"><a href="#">BUSINESS</a></li>
    <li class="active"><a href="#">DESIGN</a></li>
    <li><a href="#">INTERIOR</a></li>
    <li><a href="#">TECHNOLOGY</a></li>
    <li><a href="#">SAFETY</a></li>
    <li><a href="#">INFORMATION</a></li>
</ul>

我尝试了不同的方法，但找不到任何解决方案

$('.bottomNavi_ul li:nth-child(1), .bottomNavi_ul li:nth-child(2)').addClass('activeNavLi');
$("#nextLi").click(function() {
  var nextEle = $(".bottomNavi_ul li").nextAll('.activeNavLi').length;
  if (nextEle == 4) {
    $('.bottomNavi_ul li:nth-child(1), .bottomNavi_ul li:nth-child(2)').removeClass('activeNavLi');
    $('.bottomNavi_ul li:nth-child(3), .bottomNavi_ul li:nth-child(4)').addClass('activeNavLi');
  }
});

Answer 1

使用nextAll()和:lt()

$('ul .active')
  .removeClass('active')
  .last()
  .nextAll(':lt(2)')
  .addClass('active')

.active a {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="bottomNavi_ul clearfix">
  <li class="active"><a href="#">BUSINESS</a></li>
  <li class="active"><a href="#">DESIGN</a></li>
  <li><a href="#">INTERIOR</a></li>
  <li><a href="#">TECHNOLOGY</a></li>
  <li><a href="#">SAFETY</a></li>
  <li><a href="#">INFORMATION</a></li>
</ul>