jQuery 通过单击链接排列 li 顺序答案

【问题标题】：jQuery arrange li order by clicking on a linkjQuery 通过单击链接排列 li 顺序
【发布时间】：2012-04-04 15:51:30
【问题描述】：

需要通过点击上移或下移来改变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>

那么这里应该发生什么，例如，如果我们在 Item2 上单击 Move up，Item 2 将在 Item 1 之前上移。

我尝试这样做，但它不起作用：

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

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

【问题讨论】：

如果有适合您的答案，请将其标记为已接受的答案

标签： javascript jquery html sorting

【解决方案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 here.

【讨论】：

【解决方案2】：

试试这个。

$(".moveUp").click(function () {
    var $parent = $(this).parent();
    $parent.prev().before($parent);
});
$(".moveDown").click(function () {
    var $parent = $(this).parent();
    $parent.next().after($parent);
});

工作演示 - http://jsfiddle.net/vQmHU/

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

这个只是重新排列列表项：

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

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

【讨论】：

【解决方案5】：

http://jsfiddle.net/j7xtS/2/

$('ul').on('click', 'a', function(){
    var $this = $(this),
        $li = $this.parent();

    if ($this.hasClass('moveUp') &&  $li.prev().length>0){
        $li.prev().before($li[0]);
    }
    else if ($this.hasClass('moveDown') && $li.next().length>0){
        $li.next().after($li[0]);
    }
});

【讨论】：