jQuery下一个循环不会回到第一个孩子答案

【问题标题】：jQuery next loop not going back to first childjQuery下一个循环不会回到第一个孩子
【发布时间】：2014-08-30 07:41:48
【问题描述】：

我目前正在尝试遍历兄弟元素，但无法让循环返回到第一个兄弟元素。

我正在使用 here 所见的 nextOrFirst 函数

我在fiddle 中复制了我想要实现的目标

HTML

<div id="stories">
  <div class="swapper"><p>number 1</p></div>
  <div class="swapper"><p>number 2</p></div>
  <div class="swapper"><p>number 3</p></div>
</div>

Javascript

$(document).ready(function() { 

$.fn.nextOrFirst = function(selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
};

setInterval(

    function swap() {

        $(".swapper").each(function() {

            var nextItem = $(this).nextOrFirst();

            $(this).html($(nextItem).html());

            return;

        });

    }, 5000);

});

【问题讨论】：

代码工作正常，它在找不到下一个元素时选择第一个元素，非常完美lastOrFirst，问题出在逻辑上

标签： javascript jquery html loops next

【解决方案1】：

为什么不把最后一个元素移到顶部而不是删除最后一个

setInterval(

    function swap() {
        var $container = $("#stories");
        $container.prepend($container.find('.swapper:last').html());// move last to top
        $container.find('.swapper:last').remove(); // remove last
    }, 2000);

我猜你想达到这样的目标： jsfiddle

【讨论】：

【解决方案2】：

我认为这可以正常工作（但可能不像您想象的那样）。在.each()函数的第一次迭代中

第一个元素设置为“数字 2”（第二个元素的值）
然后将第二个元素设置为“数字 3”（第三个元素的值）
最后，第三个元素设置为“数字 2”，现在是第一个元素的值

【讨论】：

我以为是这样的，但今天早上我的大脑无法适应。干杯！

【解决方案3】：

您可以保留相同的代码，只需替换此行

$(this).html($(nextItem).html());

有了这个

$(this).insertBefore($(nextItem));

【讨论】：

【解决方案4】：

这是一个非常简单的方法。不要将当前项目的 HTML 属性设置为下一个项目，只需像这样使用 insertAfter：

http://jsfiddle.net/jgk8B/5/

$(document).ready(function() { 

    $.fn.nextOrFirst = function(selector) {
        var next = this.next(selector);
        return (next.length) ? next : this.prevAll(selector).last();
    };

    setInterval(

        function swap() {

            $(".swapper").each(function() {

                $($(this).nextOrFirst()).insertAfter($(this));

                return;

            });

    }, 500);
});

【讨论】：

【解决方案5】：

你的方法nextOrFirst()没问题，但是当你调用循环each时，有……错了。

在第一次获得nextItem 时，将第一个元素的文本更改为number 2。因此，当您第三次获得第一个元素为nextItem 时，您只需获得number 2，您的html 将显示：

number 2
number 3
number 2

这就是为什么你的循环不能回到第一个循环：你的nextOrFirst 很好，但你的each 有问题。

谢谢，爱迪生

【讨论】：