jQuery重新排序李点击

Question

我有下面的jQuery，它将单击的菜单项放在无序列表的顶部。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

$('li').on('click', function() {
    $(this).parent().prepend(this);
});

我想发生的事情不是将其移动到列表的顶部，而是将其放置在我在列表中单击的下一个项目之后。 例如，如果我单击2，然后单击3，则值为2的列表项将在列表中的3之后移动，因此html看起来像这样。

<ul>
    <li>1</li>
    <li>3</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
</ul>

我试图用下面的jQuery see fiddle来做到这一点，这在我第一次单击2然后是3时有效，但是如果您继续单击则不起作用。 如何做到这一点？

$('li').on('click', function() {
    var test = this;
    console.log($(this).text());
    $('li').on('click', function() {
        $(this).after(test);
    });
    //$(this).parent().prepend(this);
});

Answer 1

我认为，您可能需要存储第一个click元素，然后在第二个click中使用它，如下所示

jQuery(function(){
    var item;
    $('li').on('click', function () {
        if (item) {
            $(this).after(item)
            item = undefined;
        } else {
            item = this;
        }
    });
})

演示： 小提琴

Answer 2

使用.before()和.after()用.next()和.prev()

$('ul li span:nth-of-type(1)').on('click', function() {
    $(this).parent().prev().before($(this).parent());
});

$('ul li span:nth-of-type(2)').on('click', function() {
    $(this).parent().next().after($(this).parent());
});

演示

因此，在这里我们进行解释，这里是使用nth-选择器选择第一个span ，然后nth- onclick，我们将span的父级（即li移到前一个li之前，而第二个则相反。

可以通过像这样缓存元素来缩短上面的代码

$('ul li span:nth-of-type(1)').on('click', function() {
    moveup =  $(this).parent();
    moveup.prev().before(moveup);
});

$('ul li span:nth-of-type(2)').on('click', function() {
    movedown =  $(this).parent();
    movedown.next().after(movedown);
});

演示2

Answer 3

试试这个..它的工作...

 $('li').on('click', function() {
        var test = this;
        $(this).next("li").after(test);
    });

Answer 4

$('ul li').on('click', function() {
    $(this).next().after($(this));
});

这也将帮助您更改订单