JQuery .each() rückwärts

Question

Ich verwende JQuery, um einige Elemente auf einer Seite auszuwählen und sie dann im DOM zu verschieben. Das Problem, das ich habe, ist, dass ich alle Elemente in der umgekehrten Reihenfolge auswählen muss, in der JQuery sie natürlich auswählen möchte. Zum Beispiel:

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

Ich möchte alle li-Elemente auswählen und den Befehl .each() auf sie anwenden, aber ich möchte mit Element 5 beginnen, dann mit Element 4 usw. Ist dies möglich?

Answer 1

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

Answer 2

Ich präsentiere Ihnen den saubersten Weg überhaupt, in Form des kleinsten Jquery-Plugins der Welt:

jQuery.fn.reverse = [].reverse;

使用方法

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

-Ganze Anerkennung an Michael Geary in seinem Beitrag hier: http://www.mail-archive.com/discuss@jquery.com/msg04261.html

Answer 3

Das können Sie tun

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

gefolgt von

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

Answer 4

Hierfür gibt es verschiedene Möglichkeiten:

Erste : ohne 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;
});

Demo aquí

... und mit jQuery:

Sie können dies verwenden:

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

Demo aquí

Eine weitere Weise, auch unter Verwendung von jQuery mit umkehren ist:

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

Diese Demo aquí .

Eine mehr Alternative ist die Verwendung der length (Anzahl der Elemente, die mit diesem Selektor übereinstimmen) und gehen von dort aus nach unten, indem sie die index einer jeden Iteration. Dann können Sie dies verwenden:

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

Diese Demo aquí

Eine mehr die in gewisser Weise mit der oben genannten verwandt ist:

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

Demo aquí

Answer 5

Ich bevorzuge die Erstellung eines umgekehrten Plug-ins, z.B.

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

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

Verwendung z.B.:

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