基于数据属性值的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>
