7

上に移動または下に移動するには、クリックして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);
});

誰かが私を助けてくれることを願っています...

4

5 に答える 5

6

これを試して：

$(".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を動作させます。

于 2012-04-04T15:55:44.003 に答える
3

これを試して。

$(".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-04T15:56:31.553 に答える
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
});
于 2012-04-04T16:12:18.537 に答える
1

これはリストアイテムを再配置するだけです：

$(".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-14T16:05:35.507 に答える
0

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-04T16:08:41.143 に答える