jquery ordena la lista según el valor del atributo de datos

Dada la siguiente lista

  • Item 1
  • Item 2
  • Item 3
  • Item 4

hay alguna funcionalidad en la página que permitirá la posibilidad de que estos elementos cambien de posición. Por ejemplo, pueden llegar al siguiente estado (solo ejemplo, el orden podría ser cualquier cosa):

 
  • Item 3
  • Item 2
  • Item 1
  • Item 4

Estoy buscando una pequeña función para restablecer el orden. Hasta ahora tengo lo siguiente:

 function setPositions() { $( '.listitems li' ).each(function() { var position = $(this).data('position'); $(this).siblings().eq(position+1).after(this); }); } 

Pero no está funcionando correctamente. ¿Qué estoy haciendo mal?

Una condición adicional es que el orden de la lista podría no haber cambiado, por lo que la función también debe funcionar en ese escenario.

Intenta usar sort () con 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; } 

Retazo,

 $(function() { $(".listitems li").sort(sort_li).appendTo('.listitems'); function sort_li(a, b) { return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1; } }); 
  
  • Item 3
  • Item 2
  • Item 1
  • Item 4

Ampliando la respuesta de Rohan, si desea que esto funcione para múltiples listas en lugar de solo una, puede usar lo siguiente:

HTML:

 
  • Item 3
  • Item 2
  • Item 1
  • Item 4
  • Item 5
  • Item 6
  • Item 3
  • Item 4

Javascript:

 $(".listitems.autosort").each(function(){ $(this).html($(this).children('li').sort(function(a, b){ return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1; })); }); 

Eso le permitirá agregar tantas listas como desee y ordenarlas todas simplemente configurando la clase autosort.

Ejemplo en vivo

Mi propuesta, en javascript completo, es:

 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); }); }); 
 
  • Item 3
  • Item 2
  • Item 1
  • Item 4