Javascript Girl
  1. Javascript Girl
  3. Javascript / jQuery: Réorganiser les divs selon les valeurs des attributs de données
Intereting Posts
Fuseau horaire d'expression régulière Aléatoirement les divs que j'ajoute à un autre Impossible d'obtenir le tampon de signature HTML html5 à soumettre à la base de données Comment mettre en feu la méthode une seule fois lorsque vous utilisez Panright avec Hammer.js? Ng-submit ne fonctionne pas dans angularjs Tableau des colonnes de Highstock – le regroupement de données entraîne la rotation des pages indépendamment de l'axe Mettre du texte dans un numéro d'entrée ne déclenche pas d'événement de changement? JQuery (#id) .val () vs getElementById (#id) .value Lorsque vous utilisez jQuery on (), pourquoi utiliser (document) par rapport à l'élément lui-même? Pourquoi ProgressEvent.lengthComputable est-il faux? Comment restreindre l'utilisateur enregistré d'essayer de voter deux fois Quelle est la différence entre JavaScript et ECMAScript? Comment faire pour manipuler les poignées de traction du navigateur, Highstock Etendre l'opérateur ES6 Pourquoi et quand avons-nous besoin d'aplatir les objets JSON?

Javascript / jQuery: Réorganiser les divs selon les valeurs des attributs de données

Duplication possible:
Trier l'élément par valeur numérique de l'attribut de données

Je souhaite réorganiser les divs en fonction d'un attribut de données sur eux, allant de l'entier le plus élevé au plus bas. À l'heure actuelle, je pousse toutes les données dans un tableau, mais je ne sais pas comment procéder. Comment puis-je utiliser cela pour réorganiser les divs dans leur div parental? 

var prices = new Array(); $(this).children('.listing-item').each(function() { var price = parseInt($(this).attr('data-listing-price')); prices.push(price) }); prices.sort(function(a,b){return ba});

Cela me donne un tableau comme 139,129,129,109,109,84 par exemple. Maintenant, mon idée était de faire passer les divs à un autre moment avec un sélecteur comme ceci: 

 $('.listing-item[data-listing-price="' + prices[0] + '"]')

Mais je ne sais pas comment déplacer les divs (le div avec l'entier d'attribut de données le plus élevé devrait passer au sommet et ainsi de suite. Une idée?

Voici la solution

HTML: 

 <div id="list"> <div class="listing-item" data-listing-price="2">2</div> <div class="listing-item" data-listing-price="3">3</div> <div class="listing-item" data-listing-price="1">1</div> <div class="listing-item" data-listing-price="4">4</div> </div>

JS: 

 var divList = $(".listing-item"); divList.sort(function(a, b){ return $(a).data("listing-price")-$(b).data("listing-price") }); $("#list").html(divList);

JSFiddle:

http://jsfiddle.net/bittu4u4ever/ezYJh/1/ 

 var s = new Array; var i = 0; var x = $(".ch").length; $(".ch").each( function() { s[i] = $(this).data("id"); i++; }); var g = s.sort(function(a,b){return ab}); for(var c = 0; c < x; c++) { var div = g[c]; var d = $(".ch[data-id="+div+"]").clone(); var s = $(".ch[data-id="+div+"]").remove(); $(".pa").append(d); }

Fiddle de travail

Vous pouvez adapter la fonction décrite ici: Comment puis-je trier une liste par ordre alphabétique en utilisant jQuery? Et modifiez simplement la fonction de tri (' < ') 

 <div id="foo"> <div class="test" data-listing-price="30">30</div> <div class="test" data-listing-price="62">62</div> <div class="test" data-listing-price="11">11</div> <div class="test" data-listing-price="43">43</div> </div>

Dans votre js (nombre le plus élevé au plus bas): 

 var div = $('#foo'); var listitems = div.children('div.test').get(); listitems.sort(function (a, b) { return (+$(a).attr('data-listing-price') > +$(b).attr('data-listing-price')) ? -1 : (+$(a).attr('data-listing-price') < +$(b).attr('data-listing-price')) ? 1 : 0; }) $.each(listitems, function (idx, itm) { div.append(itm); });

http://jsfiddle.net/NfVxk/