为什么jQuery .after()只触发一次?
问题描述:
我正在尝试创建一个循环连续的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/
提前感谢!
答
每次运行代码时,它会将相同的元素(1
)放在3
之后。
如果你想继续重新安排,你需要每次重新设置变量为:first
和:last
。
答
插入元素会将其移动,如果它尚未插入。
在这里,你在同一个地方重复相同的插入,它不会做任何新的事情。
+0
他不想克隆 - 他想要一个旋转木马;) – Archer 2013-03-12 14:59:27
答
将您点击功能中选择:
var list = $('ul');
$('a').on('click', function(){
var firstItem = list.find('li:first'),
lastItem = list.find('li:last');
lastItem.after(firstItem);
});
通过保持他们的单击事件之外,你不改变你选择每一次的元素。通过将它们移动到你的里面。
答
var list = $('ul');
$('a').on('click', function(){
firstItem = list.find('li:first'),
lastItem = list.find('li:last');
lastItem.after(firstItem);
});
答
您还没有更新变量,因此第一项和最后一项将始终是相同的。
下面是一个选择,如果你想保留以外的选择:
var list = $('ul'),
firstItem = function(){
return list.find('li:first');
},
lastItem = function(){
return list.find('li:last');
};
$('a').on('click', function(){
lastItem().after(firstItem());
});
谢谢,SLaks!我将这些变量移入了函数体中,现在它按预期工作。不能相信我错过了这一点。干杯 – 2013-03-12 15:00:39