Question

I have a structure like:

<div id="views">
    <div id="right-view" class="current-view">
    </div>
    <div id="front-view">
    </div>
    <div id="left-view">
    </div>
</div>

I want a statement like $(".current-view").next() to behave in such way that if “.current-view” is assigned to the last child (“#left-view”, in this case), the first child is returned (“#right-view”, in this case).

Answer 1

You have to do it yourself, e.g.:

var next = $(".current-view").next();
if (!next[0]) {
    // No next, use first
    next = $("#right-view");
}

Or if you want to avoid using the “right-view” id value:

var current = $(".current-view");
var next = current.next();
if (!next[0]) {
    // No next, use first
    next = current.siblings().first();
}

Live example | Live source:

$("#theButton").click(function() {
    var current = $(".current-view");
    var next = current.next();
    if (!next[0]) {
        next = current.siblings().first();
    }
    current.removeClass("current-view");
    next.addClass("current-view");
});