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视图”被分配给最后一个子（“＃左视图“，在这种情况下），第一个孩子被返回（在这种情况下”＃右视图“）。

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

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

Answer 2

这里使用模解决方案：

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()); 

Answer 3

这个定义功能getNext()它做你问...

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

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