Einführung in die jQuery-Funktionen map() und every() und Analyse von Ähnlichkeiten und Unterschieden_jquery

Methodensyntax: map()

map(callback)
Die Rückruffunktion wird für jedes Element in der umschlossenen Menge aufgerufen und der Rückgabewert wird in einer Instanz des jQuery-Objekts gesammelt.
Parameter
Rückruf (Funktion) Eine Rückruffunktion, die für jedes Element in der umschlossenen Menge aufgerufen wird.
Der folgende Code sammelt beispielsweise die ID-Werte aller div-Elemente auf der Seite in einem Javascript-Array:

Code kopieren Der Code lautet wie folgt:

var iDs = $("div").map(function(){
Return (this.id==undefiniert) ? null :this.id;
}).get();

Sehen Sie sich die Kontrollkästchen im folgenden Formular an:

Code kopieren Der Code lautet wie folgt:

<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="text" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>

Wir können eine durch Kommas getrennte Kontrollkästchen-ID erhalten:

Code kopieren Der Code lautet wie folgt:

$(':checkbox').map(function() {
return this.id;
}).get().join();

Das Ergebnis dieses Aufrufs ist die Zeichenfolge „zwei, vier, sechs“.

In der Callback-Funktion zeigt dies in jeder Iteration auf das aktuelle DOM-Element.

Methodensyntax: every()

each(iterator)
Durchlaufen Sie alle Elemente im passenden Satz und rufen Sie die übergebene Iterationsfunktion
für jedes Element auf Iterator (Funktion) Callback-Funktion namens
für jedes Element im passenden Satz Die Methode every() kann auch zum Durchlaufen von JavaScript-Array-Objekten oder sogar einzelnen Objekten verwendet werden, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$([a,b,c,d]).each(function(){
alarm(this);
})

Diese Anweisung ruft die Iterationsfunktion für jedes Element des in $() übergebenen Arrays auf und zeigt in der Funktion auf das einzelne Array-Element.

Jedes Mal, wenn die Rückruffunktion ausgeführt wird, wird die aktuelle Schleifenanzahl als Parameter übergeben (die Zählung beginnt bei 0). Noch wichtiger ist, dass die Rückruffunktion im Kontext des aktuellen DOM-Elements ausgelöst wird. Daher verweist das Schlüsselwort this immer auf dieses Element.

Angenommen, wir haben eine einfache ungeordnete Liste wie diese auf der Seite.

Code kopieren Der Code lautet wie folgt:

<ul>
<li>foo</li>
<li>bar</li>
</ul>

Sie können diese Listen auswählen und durchlaufen:

Code kopieren Der Code lautet wie folgt:

$( "li" ).each(function( index ) {
console.log( index ": "" $(this).text() );
});

Jedes Element in der Liste wird in der folgenden Meldung angezeigt:

0: foo
1: Balken
Der Unterschied zwischen den beiden

Die Methode map() wird hauptsächlich zum Durchlaufen von Betriebsarrays und -objekten verwendet, und every() wird hauptsächlich zum Durchlaufen von Jquery-Objekten verwendet.

each() gibt das ursprüngliche Array zurück und erstellt kein neues Array.
Die Methode map() gibt ein neues Array zurück. Wenn die Karte unnötig verwendet wird, kann es zu Speicherverschwendung kommen.