2013-03-12 126 views
0

我正在尝试创建一个循环连续的jQuery旋转木马。当用户选择“旋转”时,第一个li将使用.after()方法放置在最后一个li之后。这仅适用于第一次。之后,李氏不会重新排列。这是我的HTML:为什么jQuery .after()只触发一次?

<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/

提前感谢!

回答

2

每次运行代码时,它会将相同的元素1)放在3之后。

如果你想继续重新安排,你需要每次重新设置变量为:first:last

+0

谢谢,SLaks!我将这些变量移入了函数体中,现在它按预期工作。不能相信我错过了这一点。干杯 – 2013-03-12 15:00:39

0

插入元素会将其移动,如果它尚未插入。

在这里,你在同一个地方重复相同的插入,它不会做任何新的事情。

+0

他不想克隆 - 他想要一个旋转木马;) – Archer 2013-03-12 14:59:27

2

将您点击功能中选择:

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

jsFiddle example

通过保持他们的单击事件之外,你不改变你选择每一次的元素。通过将它们移动到你的里面。

+0

为什么每次选择列表? – freshbm 2013-03-12 15:01:01

+0

@freshbm和Kevin B,已更新。 – j08691 2013-03-12 15:02:02

1
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/

0

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

下面是一个选择,如果你想保留以外的选择:

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/

相关问题