web-dev-qa-db-fra.com

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

Si j'ai plusieurs divs:

<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 amener à trier les div déjà chargés dans l’ordre, sans avoir à recharger tous les div?

Je pense que je devrais créer un tableau des valeurs de tri des données de tous les divs à l'écran, puis voir où les nouveaux divs s'intègrent, mais je ne suis pas sûr que ce soit la meilleure façon.

jqueryjquery-selectorsjavascriptjquery-ui-sortable
61
TaylorMac

utiliser cette fonction

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

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

vous pouvez appeler cette fonction juste après avoir ajouté de nouveaux divs

96
Jayantha Lal Sirisena

J'ai transformé cela en 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; }
}

Donc, vous avez une grosse div comme "#boo" et tous vos petits divs à l'intérieur:

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

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

20
PJ Brunet

Répondu à la même question ici:

Pour republier:

Après avoir recherché de nombreuses solutions, j'ai décidé de blog sur la façon de trier jquery . En résumé, les étapes pour trier les objets "ressemblant à un tableau" jquery par attribut de données ...

  1. sélectionner tous les objets via le sélecteur jQuery
  2. convertir en tableau réel (pas un objet jquery semblable à un tableau)
  3. trier le tableau d'objets
  4. reconvertit en objet jquery avec le tableau d'objets dom

Html 

<div class = "item" data-order = "2"> 2 </ div> 
 <div class = "item" data-order = "1"> 1 </ div> 
 <div class = "item" data-order = "4"> 4 </ div> 
 <div class = "item" data-order = "3"> 3 </ div>

Sélecteur JQuery simple 

$('.item');

 [<div class = "item" data-order = "2"> 2 </ div>, 
 <div class = "item" data-order = "1"> 1 </ div>, 
 <div class = "élément" data-order = "4"> 4 </ div>, 
 <div class = "élément" data-order = "3"> 3 </ div>

Permet de trier ceci par ordre de données 

function getSorted (sélecteur, attrName) {
 return $ ($ (sélecteur) .toArray (). sort (fonction (a, b) {
 var aVal = parseInt (a.getAttribute (attrName) ), 
 bVal = parseInt (b.getAttribute (attrName)); 
 return aVal - bVal; 
})) 
}
> getSorted('.item', 'data-order')

 [<div class = "item" data-order = "1"> 1 </ div>, 
 <div class = "item" data-order = "2"> 2 </ div>, 
 <div class = "élément" data-order = "3"> 3 </ div>, 
 <div class = "élément" data-order = "4"> 4 </ div>

Voir comment fonctionne getSorted ().

J'espère que cela t'aides!

8
Troy Grosfield