基于数据属性值的jQuerysorting列表

给出以下列表

<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> 

页面上有一些function可以让这些项目更改位置的可能性。 例如,他们可能会达到以下状态(仅用于示例,顺序可能是任何事情):

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

但它没有正常工作。 我究竟做错了什么?

另一个条件是列表的顺序可能没有改变,所以函数也必须在这种情况下工作。

尝试使用appendTo()的 sort () ,

 $(".listitems li").sort(sort_li) // sort elements .appendTo('.listitems'); // append again to the list // sort function callback function sort_li(a, b){ return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1; } 

片段中,

 $(function() { $(".listitems li").sort(sort_li).appendTo('.listitems'); function sort_li(a, b) { return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1; } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <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> 

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

这将允许您添加任意数量的列表,并通过设置类autosort对其进行sorting。

现场示例

我的build议,完整的JavaScript,是:

 document.addEventListener("DOMContentLoaded", function(e) { Array.prototype.slice.call(document.querySelectorAll('.listitems li')).sort(function(a, b) { return a.getAttribute('data-position').localeCompare(b.getAttribute('data-position')); }).forEach(function(currValue) { currValue.parentNode.appendChild(currValue); }); }); 
 <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>