domNext/domPrevious plugin

by rvaldez

HTML

<ul  id="myList">
    <li  class="selected">1</li>
    <li >2</li>
    <li >3</li>
</ul>
<div>Current tag:<span id="current-tag"></span></div>
<button id="prev">Previous</button>
<button id="next">Next</button>

CSS

.selected { background-color: yellow;}

JavaScript

var $curr = $(".selected"); 
 var size = $("#myList > li").length;


$("#next").click(function() {
    var index = +$("#myList > li").index($curr) + 1;
    if(index<size){
    $curr.removeClass();
    $curr = $curr.next();
    $curr.addClass("selected");
        console.log(index);
    }
});

$("#prev").click(function() {
    var index = +$("#myList > li").index($curr) + 1;
    if(index>1){
    $curr.removeClass();
    $curr = $curr.prev();
    $curr.addClass("selected");
    console.log(index);
    }
});