domNext/domPrevious plugin

by rajeshpillai

HTML

<ul id="">
    <li id="">1</li>
    <li id="">2</li>
    <li id="">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 $first = $('li:first', 'ul'),
    $last = $('li:last', 'ul');
$("#next").click(function () {
    var $next, $selected = $(".selected");


    $next = $selected.next('li').length ? $selected.next('li') : $first;
    $selected.removeClass("selected");
    $next.addClass('selected');
});

$("#prev").click(function () {
    var $prev, $selected = $(".selected");

    $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
    $selected.removeClass("selected");
    $prev.addClass('selected');
});