jQuery $.next() & $.prev() with wrapping

Wrap jQuery next and prev functions with $.nextWrap() and $.prevWrap().

(function( $ ) {
    $.fn.nextWrap = function(selector) {
        var $next = $(this).next(selector);

        if (!$next.length) {
            $next = $(this).parent().children(selector).first();
        }

        return $next;
    };

    $.fn.prevWrap = function(selector) {
        var $previous = $(this).prev(selector);

        if (!$previous.length) {
            $previous = $(this).parent().children(selector).last();
        }

        return $previous;
    };
})(jQuery);

Given the following markup:

<ul>
    <li class="one"></li>
    <li class="two"></li>
    <li class="three"></li>
</ul>

These all evaluate to true.

<script>
console.log($('.one').nextWrap().is('.two')); // true
console.log($('.two').nextWrap().is('.three')); // true
console.log($('.three').nextWrap().is('.one')); // true

console.log($('.three').prevWrap().is('.two')); // true
console.log($('.two').prevWrap().is('.one')); // true
console.log($('.one').prevWrap().is('.three')); // true
</script>
View this page on GitHub.
Posted .

Comments

Leave a Reply