Question

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

我正在使用nextOrFirst函数，如here

所示

我已经复制了我想要实现的目标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);

});

Answer 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

Answer 2

我认为这是正常的（但可能不像你想象的那样）。在.each()函数

的第一次迭代中

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

Answer 3

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

$（本）。html的（$（nextItem）的.html（））;

用这个

$（本）.insertBefore（$（nextItem））;

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

Answer 5

你的方法nextOrFirst()没问题，但是当你调用循环each时，就会出现问题。错。

首次获得nextItem时，您会将第一个元素的文本更改为number 2。因此，当您第3次将第一个元素设为number 2时，您可以获得nextItem，并且您的html会显示：

number 2
number 3
number 2

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

谢谢，爱迪生

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

5 个答案: