jquery sort list based on data attribute value
My proposal, in full javascript, is:
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>
Try to use sort()
with appendTo()
,
$(".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;
}
Snippet:
$(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>
Expanding on Rohan's answer, if you want this to work for multiple lists rather than just one, you can use the following:
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;
}));
});
That will allow you to add as many lists as you like and sort them all by just setting the class autosort.
Live Example