Move a class from one element to another in list of elements

Question

I would like to set active class from one element to another in list of elements. In order to get the list of elements I've used below code:

$(document).on('click touchstart', 'button.previouslecture', function () {    
    var allchapters = $('div.chapter');
    console.log(allchapters);

    // todo: set previous lecture as active

});

$(document).on('click touchstart', 'button.nextlecture', function () {    
    var allchapters = $('div.chapter');
    console.log(allchapters);

    // todo: set next lecture as active

});

And this code returns below result on console:

Now, how do I write jQuery code to move active class to previous or next element in the list of elements.

Update

Here's sample HTML Code:

<ul class="list-unstyled">
    <li class="mb-2 section">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter active">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
    <li class="mb-2 section">
        <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false">
            Something
        </a>
        <ul class="list-group collapse" id="sectionopen_@item.Unit.Id">
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
            <li>
                <div class="chapter">
                    <a href="#" class="d-flex w-100 justify-content-between">
                        Something
                    </a>
                </div>
            </li>
        </ul>
    </li>
</ul>

Answer 1

• Moved the declaration outside the button
• Used a counter
• Gave the buttons the same class and test on ID

 $(function() { var $allChapters = $('div.chapter'), cnt = 0; $(document).on('click touchstart', 'button.lecture', function() { $allChapters.eq(cnt).removeClass("active"); cnt += $(this).is("#previouslecture") ? -1 : 1; if (cnt<0) cnt=0; // or set to $allChapters.length-1 to wrap if (cnt>=$allChapters.length) cnt--; // or set to 0 to wrap $allChapters.eq(cnt).addClass("active"); }); }); 

 .active { border:1px solid black } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" id="previouslecture" class="lecture">Prev</button> <button type="button" id="nextlecture" class="lecture">Next</button> <ul class="list-unstyled"> <li class="mb-2 section" data-id="@item.Unit.Id"> <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false"> Something </a> <ul class="list-group collapse" id="sectionopen_@item.Unit.Id"> <li> <div class="chapter active"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> </ul> </li> <li class="mb-2 section" data-id="@item.Unit.Id"> <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false"> Something </a> <ul class="list-group collapse" id="sectionopen_@item.Unit.Id"> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> </ul> </li> <li class="mb-2 section" data-id="@item.Unit.Id"> <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false"> Something </a> <ul class="list-group collapse" id="sectionopen_@item.Unit.Id"> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> </ul> </li> <li class="mb-2 section" data-id="@item.Unit.Id"> <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false"> Something </a> <ul class="list-group collapse" id="sectionopen_@item.Unit.Id"> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> </ul> </li> </ul> 

Answer 2

 $(document).on('click touchstart', 'button.previouslecture', function () { var all = $('div.chapter'); var index = all.index(all.filter('.active')) if(index == 0) { alert('Already first'); return; } var active = $('div.chapter.active'); var next = all.eq(index-1); next.addClass('active') active.removeClass('active') }); $(document).on('click touchstart', 'button.nextlecture', function () { var all = $('div.chapter'); var active = $('div.chapter.active'); var index = all.index(all.filter('.active')) if(index == all.length-1) { alert('Already last'); return; } var active = $('div.chapter.active'); var next = all.eq(index+1); next.addClass('active') active.removeClass('active') }); 

 .active{ background-color:gray; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list-unstyled"> <li class="mb-2 section" data-id="@item.Unit.Id"> <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false"> Something </a> <ul class="list-group collapse" id="sectionopen_@item.Unit.Id"> <li> <div class="chapter "> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter active"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> </ul> </li> <li class="mb-2 section" data-id="@item.Unit.Id"> <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false"> Something </a> <ul class="list-group collapse" id="sectionopen_@item.Unit.Id"> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> </ul> </li> <li class="mb-2 section" data-id="@item.Unit.Id"> <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false"> Something </a> <ul class="list-group collapse" id="sectionopen_@item.Unit.Id"> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> </ul> </li> <li class="mb-2 section" data-id="@item.Unit.Id"> <a href="#sectionopen_@item.Unit.Id" data-toggle="collapse" aria-expanded="false"> Something </a> <ul class="list-group collapse" id="sectionopen_@item.Unit.Id"> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> <li> <div class="chapter"> <a href="#" class="d-flex w-100 justify-content-between"> Something </a> </div> </li> </ul> </li> </ul> <button class="previouslecture">Previous</button> <button class="nextlecture">Next</button>