javascript - 为什么 jQuery .after() 只触发一次？

Question

我正在尝试创建一个连续循环的 jQuery 轮播。当用户选择“旋转”时，使用 .after() 方法将第一个 li 放置在最后一个 li 之后。这只适用于第一次。在那之后，李氏就不会重新安排自己了。这是我的 HTML：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<a href="#">Rotate</a>

这是我的 JavaScript：

var list = $('ul'),
    firstItem = list.find('li:first'),
    lastItem = list.find('li:last');

$('a').on('click', function(){
    lastItem.after( firstItem );
});

这是一个小提琴：http: //jsfiddle.net/brianeoneill/76BP8/

提前致谢！

Answer 1

每次您的代码运行时，它都会1在3.

如果要继续重新排列，则需要每次将变量重新设置为:firstand 。:last

Answer 2

将您的选择器放在 click 函数中：

var list = $('ul');
$('a').on('click', function(){
    var firstItem = list.find('li:first'),
    lastItem = list.find('li:last');
    lastItem.after( firstItem );
});

jsFiddle 示例

通过将它们保留在单击事件之外，您不会更改每次选择的元素。通过将它们移动到你里面。

Answer 3

var list = $('ul');

$('a').on('click', function(){
    firstItem = list.find('li:first'),
    lastItem = list.find('li:last');

    lastItem.after( firstItem );
});

http://jsfiddle.net/76BP8/2/

Answer 4

如果元素尚未插入，则插入元素会移动它。

在这里，您在同一个地方重复相同的插入，它没有做任何新的事情。

Answer 5

您没有更新变量，因此第一项和最后一项将始终相同。

如果您想将选择保留在外部，这是一种替代方法：

var list = $('ul'),
    firstItem = function(){
        return list.find('li:first');
    },
    lastItem = function(){
        return list.find('li:last');
    };

$('a').on('click', function(){
    lastItem().after( firstItem() );   
});

http://jsfiddle.net/76BP8/3/