JQuery DOM дочерний цикл со сбросом

Question

У меня есть такая структура:

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

Я хочу, чтобы оператор, подобный $(".current-view").next(), вел себя так, чтобы, если ".current-view" был назначен последнему дочернему элементу ("# left-view ", в данном случае), возвращается первый дочерний элемент (в данном случае" # right-view ").

Answer 1

Вы должны сделать это самостоятельно, например:

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

Или если вы хотите избежать использования «правого обзора» id значение:

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

Живой пример | Живой источник :

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

Answer 2

Это определяет функцию getNext(), которая делает то, что вы просили ...

$.fn.getNext = function() {
    if ($(this).next().length === 0) {
        return $(this).parent().children().first();
    } else {
        return $(this).next();
    }
}

$(".current-view").getNext();

Answer 3

вот решение с использованием модуля:

http://jsbin.com/agasay/edit#javascript,html

 $.fn.myNext = function() 
  {
    var result = $("body p").index($(this))+1;
    return  $("body p").eq(result % $("body p").length  );

} ;

  alert($("body p:first").myNext().text());
  alert($("body p:first").myNext().myNext().text());
  alert($("body p:first").myNext().myNext().myNext().text());