jquery sort list based on data attribute value

jquery

Solution

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>

Problem

Given the following list ``` <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> ``` there is some functionality on the page that will allow the possibility of these items changing position. For example, they may get to the following state (example only, the order could be anything): ``` <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> ``` I am looking for a small function to reset the order. So far I have the following: ``` function setPositions() { $( '.listitems li' ).each(function() { var position = $(this).data('position'); $(this).siblings().eq(position+1).after(this); }); } ``` But it isnt working correctly. What am i doing wrong? An additonal condition is that the order of the list might not have changed, and so the function has to work in that scenario also.

Original source