JQuery .each() en arrière-plan

Question

J'utilise JQuery pour sélectionner certains éléments sur une page et les déplacer dans le DOM. Le problème que je rencontre est que je dois sélectionner tous les éléments dans l'ordre inverse de celui dans lequel JQuery veut naturellement les sélectionner. Par exemple :

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>

Je veux sélectionner tous les éléments li et utiliser la commande .each() sur eux, mais je veux commencer par l'élément 5, puis l'élément 4, etc. Est-ce possible ?

Answer 1

$($("li").get().reverse()).each(function() { /* ... */ });

Answer 2

Je vous présente la méthode la plus propre qui soit, sous la forme du plus petit plugin jquery du monde :

jQuery.fn.reverse = [].reverse;

Utilisation :

$('jquery-selectors-go-here').reverse().each(function () {
    //business as usual goes here
});

-Tout le mérite en revient à Michael Geary dans son article ici : http://www.mail-archive.com/discuss@jquery.com/msg04261.html

Answer 3

Vous pouvez faire

jQuery.fn.reverse = function() {
    return this.pushStack(this.get().reverse(), arguments);
}; 

suivi par

$(selector).reverse().each(...)

Answer 4

Voici différentes options pour cela :

Premier : sans jQuery :

var lis = document.querySelectorAll('ul > li');
var contents = [].map.call(lis, function (li) {
    return li.innerHTML;
}).reverse().forEach(function (content, i) {
    lis[i].innerHTML = content;
});

Démo aquí

... et avec jQuery :

Vous pouvez utiliser ceci :

$($("ul > li").get().reverse()).each(function (i) {
    $(this).text( 'Item ' + (++i));
});

Démo aquí

Un autre en utilisant également jQuery avec inverser est :

$.fn.reverse = [].reverse;
$("ul > li").reverse().each(function (i) {
    $(this).text( 'Item ' + (++i));
});

Cette démo aquí .

Un de plus L'alternative est d'utiliser le length (nombre d'éléments correspondant à ce sélecteur) et descendez à partir de là en utilisant l'option index de chaque itération. Vous pouvez alors utiliser ceci :

var $li = $("ul > li");
$li.each(function (i) {
    $(this).text( 'Item ' + ($li.length - i));
});

Cette démo aquí

Un de plus qui est en quelque sorte liée à celle ci-dessus :

var $li = $("ul > li");
$li.text(function (i) {
    return 'Item ' + ($li.length - i);
});

Démo aquí

Answer 5

Je préfère créer un plug-in inverse, par exemple

jQuery.fn.reverse = function(fn) {       
   var i = this.length;

   while(i--) {
       fn.call(this[i], i, this[i])
   }
};

Utilisation par exemple :

$('#product-panel > div').reverse(function(i, e) {
    alert(i);
    alert(e);
});