jQuery通过单击链接来排列li命令

Question

需要通过单击向上移动或向下移动来更改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);
});

希望可以有人帮帮我...

Answer 1

试试这个:

$(".moveUp").click(function () {
    var thisLine = $(this).parent();
    var prevLine = thisLine.prev();
    prevLine.before(thisLine);
});

$(".moveDown").click(function () {
    var thisLine = $(this).parent();
    var prevLine = thisLine.next();
    prevLine.after(thisLine);
});

在这里工作jsFiddle .

Answer 2

这应该可以工作，并且当您尝试将元素向上移动到顶部或向下移动到底部时，也不会将元素移动到 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
});