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

每次代码运行时，它都会将{strong>相同的元素（1）放在3之后。

如果您想继续重新安排，则每次都需要将变量重新设置为:first和:last。

Answer 2

将选择器放在点击功能中：

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

<强> jsFiddle example

通过将它们保持在click事件之外，您不会更改每次选择的元素。把它们移到里面你就是。

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/

为什么jQuery .after（）只会触发一次？

5 个答案: