Selector Previous Next

by Apple Ilagan

HTML

<ul 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>

CSS

li {margin-left:30px;}

JavaScript

function next(selector) {
    var $element = $(selector);

    return $element
        .children(":eq(0)")
        .add($element.next())
        .add($element.parents().filter(function() {
            return $(this).next().length > 0;
        }).next()).first();
}

function previous(selector) {
    var $element = $(selector);
    
    return $element
        .prev().find("*:last")   
        .add($element.parent())     
        .add($element.prev())
        .last();      
}

next("#ul3").css("background-color", "yellow");
previous("#lixy").css('background-color', 'blue');