domNext/domPrevious plugin

HTML

<ul class='selected' 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

(function($) {
    $.fn.domNext = function() {
        return this
            .children(":eq(0)")
            .add(this.next())
            .add(this.parents().filter(function() {
                return $(this).next().length > 0;
            }).next()).first();        
    };
    
    $.fn.domPrevious = function() {
        return this
            .prev().find("*:last")   
            .add(this.parent())     
            .add(this.prev())
            .last();         
    };
})(jQuery);

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

    $selected.removeClass("selected");
    $next = $selected.domNext().addClass("selected");
    if ($next.length) {
        $("#current-tag").text($next.attr('class'));
    }
});

$("#prev").click(function() {
    var $prev, $selected = $(".selected");
    $selected.removeClass("selected");
    $prev = $selected.domPrevious().addClass("selected");
    if ($prev.length) {
        $("#current-tag").text($prev.get(0).tagName);
    }
    
});