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()这样的语句能够以如下方式表现：if＆＃34; .current-view＆＃34;被分配给最后一个孩子（＆＃34;＃left-view＆＃34;，在这种情况下），返回第一个孩子（＆＃34;＃right-view＆＃34;，在这种情况下）。

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

这定义了你所要求的函数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());

JQuery DOM childs循环重置

3 个答案: