jQuery通过单击链接排列li订单

需要通过单击向上移动或向下移动来更改li位置。jQuery通过单击链接排列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.

我tryed做到这样，但它不工作：

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

希望有人可以帮我...

来源

2012-04-04 user1309015

如果有已经为你工作的回答，请注明它作为公认的答案 – JakeJ 2012-04-04 16:43:41

这应该工作，当你尝试，并在顶部或向下移动它也不会移动元素的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 
});

来源

2012-04-04 16:12:18 JakeJ

杰克..首先非常感谢..多数民众赞成在一个很好的代码.. – user1309015 2012-04-04 21:41:50

试试这个：

Working jsFiddle here。

来源

2012-04-04 15:55:44 hohner

Tks为您的答复杰米... – user1309015 2012-04-04 21:40:14

试试这个。

$(".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/

来源

2012-04-04 15:56:31 ShankarSangoli

Tks为您的答复，良好的一Shankar ... – user1309015 2012-04-04 21:41:16

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]); 
    } 
});

来源

2012-04-04 16:08:41 Bart

巴特...许多tks伙计.. – user1309015 2012-04-04 21:42:29

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

$(".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); 
});

来源

2012-09-14 16:05:35 Quan

jQuery通过单击链接排列li订单

回答

相关问题