需要通过单击向上移动或向下移动来更改li位置.
<div>
<ul>
<li>Item1 <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
<li>Item2 <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
<li>Item3 <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
<li>Item4 <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
<li>Item5 <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
</ul>
</div>
那么这里应该发生什么,例如,如果我们点击向上移动第2项,则第2项将在第1项之前向上移动.
我试着这样做,但它不起作用：
$(".moveUp").click(function () {
var thisLine = $(this).parent();
var prevLine = thisLine.prev();
prevLine.insertAfter(thisLine);
});
希望可以有人帮帮我…
解决方法
当您尝试将元素向上移动或向下移动到底部时,这应该可以工作并且也不会将元素移动到UL之外：
$('.moveUp').click(function(){
var liItem = $(this).parent();
if (liItem.prev().is('li'))
{
liItem.insertBefore(liItem.prev())
}
});
$('.moveDown').click(function(){
var liItem = $(this).parent();
if (liItem.next().is('li'))
{
liItem.insertAfter(liItem.next())
}
});
工作实例：http://jsfiddle.net/BDecp/
此外,您的代码应该包含此：
$(document).ready(function () {
//Code Here
});
