基于数据属性值的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">&nbsp; &nbsp; <li data-position="3">Item 3</li>&nbsp; &nbsp; <li data-position="2">Item 2</li>&nbsp; &nbsp; <li data-position="1">Item 1</li>&nbsp; &nbsp; <li data-position="4">Item 4</li></ul><ul class="listitems autosort">&nbsp; &nbsp; <li data-position="5">Item 5</li>&nbsp; &nbsp; <li data-position="6">Item 6</li>&nbsp; &nbsp; <li data-position="3">Item 3</li>&nbsp; &nbsp; <li data-position="4">Item 4</li></ul>Javascript：$(".listitems.autosort").each(function(){&nbsp; &nbsp; $(this).html($(this).children('li').sort(function(a, b){&nbsp; &nbsp; &nbsp; &nbsp; return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;&nbsp; &nbsp; }));});这样，您可以根据需要添加任意数量的列表，并对它们进行排序，只需设置类自动排序即可。