Как добавить класс к следующим двум элементам и удалить из текущих двух?

Question

Я хочу добавить активный класс к следующим двум li и удалить из текущего эти два активных класса.

<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() и .filter().Я бы просто отфильтровал по индексу и взял первые два.

$('.active')
  .removeClass('active')          // remove the inital classes
  .last()                         // target the last of your selection
  .nextAll()                      // grab all the following siblings
  .filter(i => i < 2)             // filter down to only the following two based on index
  .addClass('active')             // add the active class

.active {
  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>

Если вы не можете использовать синтаксис ES6, просто используйте .filter(function(i){ return i < 2 })

Answer 2

Использование 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>

Answer 3

Попробуй это!Он хорошо работает только с использованием Vanilla JS и оператора модуля (%), который возвращает остаток от деления, чтобы оставаться внутри элементов 'li', не выходя из массива.(PS: я добавил один тег 'li', чтобы проверить его в нечетном количестве тегов 'li')

<style>
    .active{background-color: red;}
</style>

<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>
    <li><a href="#">INFORMATION</a></li>
</ul>

<button id="button1">Click Me!</button>

<script>
    document.getElementById("button1").addEventListener("click", moveClasses);

function moveClasses(){
    let listChildren = document.getElementsByTagName("LI");

    for(let i=0; i<listChildren.length; i++){
        if(listChildren[i].className == "active")
        {
            listChildren[i].className ="";
            //lets first handle a special case: first and last elements have class 'active'
            if(i == 0 && listChildren[listChildren.length-1].className == "active"){
                //so we have to elements have 'active' class but they are not one after another,
                //the first one is the first child, and the second one is the last child                            
                listChildren[(i+1)%listChildren.length].className ="active";
                listChildren[(i+2)%listChildren.length].className ="active";
                listChildren[listChildren.length-1].className = "";
                return;
            }                       
            listChildren[(i+1)%listChildren.length].className ="";
            listChildren[(i+2)%listChildren.length].className ="active";
            listChildren[(i+3)%listChildren.length].className ="active";
            break;
        }        
    }                
}
</script>