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

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

Demo

所以，我们在这里继续解释，在这里使用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);
});

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

这也可以帮助您更改订单

jquery在点击时重新排序

4 个答案: