Vous recherchez une solution javascript pour réorganiser les divs

J’ai des divs dans la page qui montrent différentes choses du même genre, par exemple des offres, les offres ont maintenant une heure de fin, et aussi l’heure affichée, si l’utilisateur veut commander par heure de fin ou l’heure affichée, elles doivent être commandées .

Je cherche une solution javascript qui pourrait le faire, n’importe quelle bibliothèque particulière sous Ext JS ou JQuery fonctionnerait

Voici à quoi ressemblent ces divs

Je veux donc pouvoir sortinger ces divs en fonction de data-sortN, N étant un entier

Edit: OK, maintenant que vous avez fourni du code HTML, voici le code javascript permettant de sortinger ce code HTML spécifique par le numéro de colonne souhaité:

 function sortByDataItem(containerID, dataNum) { var values = []; $("#" + containerID + " .item").each(function(index) { var item = {}; item.index = index; item.obj = this; item.value = $(this).data("sort" + dataNum); values.push(item); }); values.sort(function(a, b) {return(b.value - a.value);}); var container = $("#" + containerID); for (var i = 0; i < values.length; i++) { var self = $(values[i].obj); self.detach(); container.prepend(self); } return; } $("#sort").click(function() { var sortValue = $("#sortColumn").val(); if (sortValue) { sortValue = parseInt(sortValue, 10); if (sortValue && sortValue > 0 && sortValue <= 3) { sortByDataItem("container", sortValue); return; } } $("#msg").show(1).delay(5000).fadeOut('slow'); });

Vous pouvez le voir fonctionner ici dans un jsFiddle: http://jsfiddle.net/jfriend00/JG32X/

Puisque vous ne nous avez pas donné de code HTML, j'ai créé mon propre code HTML et vous ai montré comment utiliser jQuery pour sortinger:

HTML:

 
  Popcorn
$5.00
 Peanuts
$4.00
 Cookie
$3.00
 Beer
$5.50
 Soda
$4.50

Javascript (une fois que la page est chargée):

 $("#sort").click(function() { var prices = []; // find all prices $("#productList .price").each(function(index) { var str = $(this).text(); var item = {}; var matches = str.match(/\d+\.\d+/); if (matches && matches.length > 0) { // parse price and add it to the prices array item.price = parseFloat(matches[0]); item.row = $(this).closest(".row").get(0); item.index = index; prices.push(item); } }); // now the prices array has all the prices in it // sort it using a custom sort function prices.sort(function(a, b) { return(a.price - b.price); }); // now pull each row out and put it at the beginning // starting from the end of the prices list var productList = $("#productList"); for (var i = prices.length - 1; i >= 0; i--) { var self = $(prices[i].row); self.detach(); productList.prepend(self); } });

Et un jsFiddle qui le montre en action: http://jsfiddle.net/jfriend00/vRdrA/ .

J’ai créé un minuscule jqueryPlugin à partir de la réponse de jfriend00:

 (function($){ $.fn.sortChildrenByDataKey = function(key, desc){   var i, els = this.children().sort(function(a, b) {return (desc?1:-1)*($(a).data(key) - $(b).data(key));});   for (i = 0; i < els.length; i++) {     this.prepend($(els[i]).detach());   } return this; }; })(jQuery);

Votre HTML:

   ... 
  ... 
 ...

Usage:

 $('div#myContainer').sortChildrenByDataKey('myKey', true_or_false);

Les enfants du conteneur peuvent être n'importe quel élément. Il est seulement important qu'ils soient des enfants immédiats et qu'ils possèdent la clé data-X

Merci, jfriend00 !!