Javascript Girl
  1. Javascript Girl
  3. Comment commander des divs avec JQUERY
Intereting Posts
Vérifiez si la valeur de la clé existe et si vous ne appuyez pas sur la touche avec la valeur dans javascript Passer la valeur entre deux fichiers dactylographiés à composants angulaires2 JavaScript – permet d'obtenir une largeur et une hauteur d'image réelles (navigateur croisé) Exiger 2 décimales dans la saisie de texte avec jQuery validation Comment faire une redirection de page en utilisant Javascript? React Native – Envoi d'événements de Native vers JavaScript dans AppDelegate (iOS) Aléatoirement de la valeur en Javascript Obtenir un clientid dans le contrôle de l'utilisateur à partir du fichier javascript externe L'API d'internationalisation de Javascript n'est pas prise en charge par PhantomJS Champ caché MVC validé Trouver des annonces sur une page Web Insertion de CSS avec une extension Firefox Comment puis-je obtenir un UIWebView pour me concentrer sur une entrée de formulaire et faire apparaître le clavier? La taille de requête des médias CSS supérieure à la largeur et la version de visa (ou comment imiter avec JavaScript) Pourquoi augmenter les connexions de travail dans Nginx rend l'application plus lente dans node.js cluster?

Comment commander des divs avec JQUERY

J'ai des divs comme ceci: 

<div class="oferta SYB"> <div class="infoferta"> <div class="datosoferta"> <div class="ofertapagas">Pag&aacute;s<br/> $ 67</div> <div class="ofertavalor">Valor<br /> $ 160</div> <div class="ofertadescuento">Descuento $ 93</div> </div> </div>

Je veux commander les divs avec la classe = "oferta" par la valeur dans "ofertaspagas" ou la valeur dans "ofertavalor" ou la valeur dans "ofertadescuento", je ne sais pas comment, je ne peux pas utiliser la base de données, je peux juste Utilisez Jquery, j'utilise la dernière version de celui-ci. Certains aident s'il vous plaît!

Array.prototype.sort résume Array.prototype.sort . Étant donné que les jeux de jQuery sont des objets tels que Array , vous pouvez simplement appeler .sort() sur eux ou appliquer un tri sur eux. 

 var $datosoferta = $('.datosoferta'); $datosoferta.children().detach().sort(function(a,b) { return +a.textContent.split(/\$/)[1].trim() - +b.textContent.split(/\$/)[1].trim(); }).appendTo($datosoferta);

Voir http://typeofnan.blogspot.com/2011/02/did-you-know.html

Demo : http://jsfiddle.net/Rfsfs/

En utilisant ui. JQuery UI – Sorote Demos & Documentation

Pour votre code; 

 $( ".offer" ).sortable({ update: function(event, ui) { // do post server. } });

Si vous placez les DIV d'offre dans une sorte de conteneur (un autre DIV?), Vous pouvez ensuite récupérer toutes les offres et trier par les valeurs de leurs enfants.

Dans le code HTML ci-dessous, j'ai mis les divs d'offre dans un conteneur div et ajouté un attribut de data-value à chacun des divs enfants contenant des données, pour un accès plus facile (aucune expression régulière n'est requise). 

 <div id="ofertas_container"> <div class="infoferta"> <div class="datosoferta"> <div class="ofertapagas" data-value="67">Pag&aacute; $ 67</div> <div class="ofertavalor" data-value="130">Valor $ 130</div> <div class="ofertadescuento" data-value="93">Descuento $ 93</div> </div> </div> <div class="infoferta"> <div class="datosoferta"> <div class="ofertapagas" data-value="57">Pag&aacute; $ 57</div> <div class="ofertavalor" data-value="150">Valor $ 150</div> <div class="ofertadescuento" data-value="43">Descuento $ 43</div> </div> </div> <div class="infoferta"> <div class="datosoferta"> <div class="ofertapagas" data-value="107">Pag&aacute; $ 107</div> <div class="ofertavalor" data-value="250">Valor $ 250</div> <div class="ofertadescuento" data-value="1000">Descuento $ 1000</div> </div> </div> </div> <a href="javascript: void 0;" id="sort_pagas" data-key="ofertapagas">Pag&aacute;</a> <a href="javascript: void 0;" id="sort_valor" data-key="ofertavalor">Valor</a> <a href="javascript: void 0;" id="sort_descuento" data-key="ofertadescuento">Descuento</a>

La fonction JS / jQuery: 

 ofertas_sort = function(sort_key) { // array of offer divs var ofertas = $('.infoferta'); // the div classname corresponding to the key by which // we are sorting var sort_key_sel = 'div.' + sort_key; // in large lists it'd be more efficient to calculate // this data pre-sort, but for this instance it's fine ofertas.sort(function(a, b) { return parseInt($(sort_key_sel, a).attr('data-value')) - parseInt($(sort_key_sel, b).attr('data-value')); }); // re-fill the container with the newly-sorted divs $('#ofertas_container').empty().append(ofertas); };

Voici le code sur jsFiddle, avec quelques liens au bas du HTML pour démo le tri: http://jsfiddle.net/hans/Rfsfs/2/

J'ai changé certaines des valeurs pour rendre le tri plus visible.