domNext/domPrevious plugin

by Apple Ilagan

HTML

<ul class='selected' id="ul1">
    <li id="li1">1</li>
    <li id="li2">2</li>
    <li id="li3">3</li>
    <li>
        <ul id="ul2">
            <li id="li4">4</li>
            <li id="lixy">
                <ul id="ul3">
                    <li id="li5">5</li>
                    <li id="li6">6</li>
                </ul>
            </li>
            <li id="li7">7</li>
            <li id="li8">8</li>
        </ul>
    </li>
    <li id="li9">9</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.get(0).tagName);
    }
});

$("#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);
    }
    
});