基于数据属性值的jQuery排序列表

Question

给出以下列表<ul class="listitems">    <li data-position="1">Item 1</li>    <li data-position="2">Item 2</li>    <li data-position="3">Item 3</li>    <li data-position="4">Item 4</li></ul>页面上有一些功能，可以使这些项目改变位置。例如，他们可能会进入以下状态（仅作为示例，订单可以是任何东西）：<ul class="listitems">    <li data-position="3">Item 3</li>    <li data-position="2">Item 2</li>    <li data-position="1">Item 1</li>    <li data-position="4">Item 4</li></ul>我正在寻找一个小的功能来重置订单。到目前为止，我有以下内容：function setPositions(){    $( '.listitems li' ).each(function() {        var position = $(this).data('position');        $(this).siblings().eq(position+1).after(this);    });}但是它不能正常工作。我究竟做错了什么？附加条件是列表的顺序可能没有更改，因此该功能也必须在这种情况下起作用。

Answer 1

扩展Rohan的答案，如果您希望此方法适用于多个列表而不只是一个列表，则可以使用以下方法：

HTML：

<ul class="listitems autosort">

    <li data-position="3">Item 3</li>

    <li data-position="2">Item 2</li>

    <li data-position="1">Item 1</li>

    <li data-position="4">Item 4</li>

</ul>

<ul class="listitems autosort">

    <li data-position="5">Item 5</li>

    <li data-position="6">Item 6</li>

    <li data-position="3">Item 3</li>

    <li data-position="4">Item 4</li>

</ul>

Javascript：

$(".listitems.autosort").each(function(){

    $(this).html($(this).children('li').sort(function(a, b){

        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;

    }));

});

这样，您可以根据需要添加任意数量的列表，并对它们进行排序，只需设置类自动排序即可。