jQuery indexing divs for prev/next navigation

Question

I wonder if it's possible to create something like a prev/next navigation with jQuery where it indexes all the divs with the same class. To try this I created a pretty basic fiddle.

HTML:

<ul class="list-inline">
    <li><a href="#" class="prevtrigger">PREV</a></li>
    <li><a href="#" class="nexttrigger">NEXT</a></li>
</ul>

    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="box">1</div>
                <div class="box">2</div>
                <div class="box">3</div>
            </div>  
            <div class="col-md-6">
                <div class="box">4</div>
                <div class="box">5</div>
                <div class="box">6</div>
            </div>
        </div>
    </div>

And I also created a basic jQuery action changing the color of the boxes:

$( document ).ready(function() {

     $('.prevtrigger').click(function(){
                  $( '.box' ).css("background-color", "blue")
     });

    $('.nexttrigger').click(function(){
                  $( '.box' ).css("background-color", "green")
     });

});

Now the question is: how do I manage to color one div after another red or green depending on the actual index it has. Ideas anyone? Have a look at my fiddle: HERE!

Answer 1

Take a look at following jQuery functions:

• prev()
• next()

Example:

$(".box.active").prev().css("background-color", "blue" );
$(".box.active").next().css("background-color", "green");

You could add a "active" class to the current element and use the prev and next function to make the switch.

Jsfiddle