Trier les divs dans jQuery en fonction de l'attribut 'data-sort' ?

Question

Si j'ai plusieurs div :

 <div data-sort='1'>div1</div>
<div data-sort='4'>div4</div>
<div data-sort='8'>div8</div>
<div data-sort='12'>div12</div>
<div data-sort='19'>div19</div>

Et je crée dynamiquement les divs :

 <div data-sort='14'>div1</div>
<div data-sort='6'>div1</div>
<div data-sort='9'>div1</div>

Comment puis-je les faire trier simplement dans les divs déjà chargés dans l'ordre, sans avoir à recharger tous les divs ?

Je pense que je devrais créer un tableau des valeurs de tri des données de toutes les div à l'écran, puis voir où s'intègrent les nouvelles div, mais je ne sais pas si c'est la meilleure façon.

Answer 1

Utiliser cette fonction

    var result = $('div').sort(function (a, b) {

      var contentA =parseInt( $(a).data('sort'));
      var contentB =parseInt( $(b).data('sort'));
      return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
   });

   $('#mylist').html(result);

Vous pouvez appeler cette fonction juste après avoir ajouté de nouveaux div.

Si vous souhaitez conserver les événements javascript dans les divs, N'UTILISEZ PAS html replace comme dans l'exemple ci-dessus. Utilisez plutôt :

 $(targetSelector).sort(function (a, b) {
    // ...
}).appendTo($container);

Answer 2

J'en ai fait une fonction jQuery :

 jQuery.fn.sortDivs = function sortDivs() {
    $("> div", this[0]).sort(dec_sort).appendTo(this[0]);
    function dec_sort(a, b){ return ($(b).data("sort")) < ($(a).data("sort")) ? 1 : -1; }
}

Vous avez donc un gros div comme "#boo" et tous vos petits div à l'intérieur :

$("#boo").sortDivs();

Vous avez besoin du "? 1 : -1" à cause d'un bug dans Chrome, sans cela il ne triera pas plus de 10 divs ! http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html