web-dev-qa-db-de.com

JQuery .each () rückwärts

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 () für sie verwenden, aber ich möchte mit Element 5, dann mit Element 4 usw. beginnen. Ist dies möglich?

426
Jack Mills
$($("li").get().reverse()).each(function() { /* ... */ });
656
Joe Chung

Ich präsentiere Ihnen die sauberste Art und Weise aller Zeiten in Form des kleinsten JQuery-Plugins der Welt:

jQuery.fn.reverse = [].reverse;

Verwendungszweck:

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

-Alle Verdienste um Michael Geary in seinem Beitrag hier: http://www.mail-archive.com/[email protected]/msg04261.html

396
Waldo Hampton

Du kannst tun

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

gefolgt von

$(selector).reverse().each(...) 
62
Vinay Sajip

Hierzu gibt es verschiedene Möglichkeiten:

Zuerst : 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 hier

... und mit jQuery:

Sie können dies verwenden:

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

Demo hier

Ein anderer Weg, der auch jQuery mit reverse verwendet = ist:

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

Diese Demo hier .

Eine weitere Alternative besteht darin, den length (Anzahl der Elemente, die diesem Selektor entsprechen) zu verwenden und von dort mit dem index jeder Iteration. Dann können Sie dies verwenden:

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

Diese Demo hier

Ein weiteres , das in gewisser Weise mit dem obigen verwandt ist:

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

Demo hier

19
Sergio

Ich ziehe es vor, ein Reverse Plug-In zu erstellen, z

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

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

Verwendung zB:

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

Wenn Sie die Methode nicht in jQuery.fn speichern möchten, können Sie sie verwenden

[].reverse.call($('li'));
8
yurakis

Ich musste $ .each umkehren, also benutzte ich die Vinay-Idee:

//jQuery.each(collection, callback) =>
$.each($(collection).get().reverse(), callback func() {});

hat gut funktioniert, danke

5
finklez

Sie können mit der jQuery-Funktion nicht alle Funktionen rückwärts durchlaufen, können jedoch die jQuery-Syntax nutzen.

Versuche Folgendes:

//get an array of the matching DOM elements   
var liItems = $("ul#myUL li").get();

//iterate through this array in reverse order    
for(var i = liItems.length - 1; i >= 0; --i)
{
  //do Something
}
3
David Andres

Ich fand Array.prototype.reverse Mit Objekten nicht erfolgreich, daher habe ich eine neue jQuery-Funktion als Alternative erstellt: jQuery.eachBack(). Es durchläuft wie die normale Funktion jQuery.each() und speichert jede Taste in einem Array. Anschließend wird das Array umgekehrt und der Rückruf für das ursprüngliche Array/Objekt in der Reihenfolge der umgekehrten Schlüssel ausgeführt.

jQuery.eachBack=function (obj, callback) {
    var revKeys=[]; $.each(obj,function(rind,rval){revKeys.Push(rind);}); 
    revKeys.reverse();
    $.each(revKeys,function (kind,i){
        if(callback.call(obj[i], i, obj[i]) === false) {    return false;}
    });
    return obj;
}   
jQuery.fn.eachBack=function (callback,args) {
    return jQuery.eachBack(this, callback, args);
}
2
NRTRX

Ich erkenne, dass jQuery Plugins unterstützt und fördert. Trotzdem finden Sie diesen Artikel möglicherweise relevant: Ändern Sie keine Objekte, die Sie nicht besitzen . Zumindest in diesem Fall habe ich mich dafür entschieden, jQuery nicht zu verlängern, wenn die Wahrscheinlichkeit, dass ein anderes Plugin das Reverse anders definiert, ausfällt.

Hier ist eine einfache Lösung, die das jQuery-Objekt nicht erweitert.

function jqueryReverse( set ) {

    return [].reverse.call( set );
}

console.log( jqueryReverse( $( 'li' ) ) );
0
Lachmanski