javascript - jquery 在点击时对 li 重新排序

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

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

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

演示:Fiddle