5 jQuery.each () Funktionsbeispiele

In diesem Artikel wird die Funktion jQuery.each () eingehend erläutert - eine der wichtigsten und am häufigsten verwendeten Funktionen in JQuery. Wir werden seine Bedeutung untersuchen und lernen, wie man sie benutzt.

Kernpunkte

Die Funktion
1. jQuery.each () ist ein Multifunktions-Tool in JQuery, das Domelemente, Arrays und Objekte iteriert, um die DOM-Operationen und die Datenverarbeitung von mehreren Elementen effizient durchzuführen.
2. Diese Funktion liefert zwei Betriebsmodi: Als Methode, die ein JQuery -Objekt (für DOM -Elemente) aufgerufen wird, und als praktische Funktion für Arrays und Objekte ist jeder Modus für verschiedene Arten von Datenstrukturen geeignet.
3. Bei praktischen Beispielen zeigt dieser Artikel die Kraft und Flexibilität von jQuery.each (), hebt seine Bedeutung für die Vereinfachung der Iterationen hervor und hebt alternative JavaScript -Methoden für die Ausführung ähnlicher Aufgaben hervor.

Was ist jQuery.each ()?

jQuery's Jedes () -Funktion wird verwendet, um jedes Element des Ziel -JQuery -Objekts zu durchschleifen - ein Objekt, das ein oder mehrere DOM -Elemente enthält, und alle JQuery -Funktionen aufzudecken. Es ist sehr nützlich für Multi-Element-DOM-Operationen und Iterationen über willkürliche Array- und Objekteigenschaften.

Zusätzlich zu dieser Funktion bietet JQuery auch eine Helferfunktion mit demselben Namen, der ohne vorherige Auswahl oder Erstellung von DOM -Elementen aufgerufen werden kann.

jQuery.each () syntax

Schauen wir uns die praktische Anwendung verschiedener Modi an.

Das folgende Beispiel wählt jedes <div> Element auf der Webseite aus und gibt den Index und die ID jedes Elements aus: <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;// DOM 元素 $('div').each(function(index, value) { console.log(`div${index}: ${this.id}`); });&lt;/code&gt;</pre> <p> Die möglichen Ausgabeergebnisse sind: </p> <pre class="brush:php;toolbar:false">&lt;code&gt;div0:header div1:main div2:footer&lt;/code&gt;</pre> <p> Diese Version verwendet die <code>$(selector).each() -Funktion von JQuery, keine praktischen Funktionen.

Das nächste Beispiel zeigt die Verwendung praktischer Funktionen. In diesem Fall wird das Objekt als erster Parameter angegeben. In diesem Beispiel werden wir zeigen, wie man das Array durchläuft:

<code class="language-javascript">// 数组
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  // 将在 "three" 后停止运行
  return (value !== 'three');
});

// 输出：one two three</code>

Im letzten Beispiel möchten wir zeigen, wie wir über die Eigenschaften eines Objekts iterieren können:

<code class="language-javascript">// 对象
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

// 输出：1 2 3 4 5</code>

All dies läuft darauf hinaus, die entsprechende Rückruffunktion bereitzustellen. Der Kontext der Rückruffunktion this entspricht seinem zweiten Parameter, dem aktuellen Wert. Da der Kontext jedoch immer ein Objekt ist, muss der ursprüngliche Wert verpackt werden:

<code class="language-javascript">$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }</code>

Dies bedeutet, dass es keine strenge Gleichheit zwischen dem Wert und dem Kontext gibt.

<code class="language-javascript">$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false</code>

Der erste Parameter ist der aktuelle Index, der eine Zahl (für Arrays) oder eine String (für Objekte) ist.

1. Basic jQuery.each () Funktion Beispiel

Lassen Sie uns sehen, wie die Funktion jQuery.each () in Verbindung mit JQuery -Objekten verwendet wird. Das erste Beispiel wählt alle a Elemente auf der Seite aus und gibt ihre href Eigenschaften aus:

<code class="language-javascript">$('a').each(function(index, value){
  console.log(this.href);
});</code>

Das zweite Beispiel gibt jeden externen href auf der Webseite aus (unter der Annahme nur das HTTP (S) -Protokoll):

<code class="language-javascript">$('a').each(function(index, value){
  const link = this.href;

  if (link.match(/https?:\/\//)) {
    console.log(link);
  }
});</code>

Angenommen, es gibt den folgenden Link auf der Seite:

<code class="language-html"><a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>
<a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a>
<a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a></code>

Das zweite Beispiel wird ausgegeben:

<code class="language-javascript">// DOM 元素
$('div').each(function(index, value) {
  console.log(`div${index}: ${this.id}`);
});</code>

Wir sollten beachten, dass das DOM -Element aus dem JQuery -Objekt in der Rückruffunktion, die es an jQuery.each () übergibt, "natives" Formular ist. Der Grund dafür ist, dass JQuery eigentlich nur ein Wrapper für Arrays von DOM -Elementen ist. Durch die Verwendung von jQuery.each () wird dieses Array auf die gleiche Weise wie ein normales Array iteriert. Daher werden wir nicht die Elemente der Verpackung aus der Schachtel bekommen.

Zu unserem zweiten Beispiel bedeutet dies, dass wir das Attribut des Elements durch das Schreiben this.href erhalten können. Wenn wir die href -Methode von JQuery verwenden möchten, müssen wir das Element wie folgt neu verpacken: attr(). $(this).attr('href')

2. jQuery.each () Array Beispiel

Lassen Sie uns sehen, wie man mit normalen Arrays umgeht:

<code>div0:header
div1:main
div2:footer</code>

Dieser Code -Snippet -Ausgang:

<code class="language-javascript">// 数组
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  // 将在 "three" 后停止运行
  return (value !== 'three');
});

// 输出：one two three</code>

nichts Besonderes hier. Das Array hat einen numerischen Index, daher erhalten wir Zahlen von 0 bis

n-1 , wobei n die Anzahl der Elemente im Array ist.

3. jQuery.each () json Beispiel

wir können komplexere Datenstrukturen wie Arrays in Arrays, Objekten in Objekten, Objekten in Arrays oder Arrays in Objekten haben. Mal sehen, wie jQuery.each () uns in diesem Fall helfen kann:

<code class="language-javascript">// 对象
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

// 输出：1 2 3 4 5</code>

Dieses Beispielausgabe:

<code class="language-javascript">$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }</code>

Wir verwenden verschachtelte Anrufe bei jQuery.each (), um verschachtelte Strukturen zu bewältigen. Der externe Anruf behandelt das Array der variablen Farben. In diesem Beispiel gibt es nur einen Schlüssel pro Objekt, aber Sie können diesen Code normalerweise verwenden, um eine beliebige Anzahl von Schlüssel zu verarbeiten.

4. jQuery.each () Klasse Beispiel

Dieses Beispiel zeigt, wie man jedes Element der zugewiesenen Klasse productDescription durchschlägt (angegeben im HTML unten):

<code class="language-javascript">$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false</code>

Wir verwenden jede () Helferfunktion anstelle jeder () Methode im Selektor.

<code class="language-javascript">$('a').each(function(index, value){
  console.log(this.href);
});</code>

In diesem Fall ist die Ausgabe:

<code class="language-javascript">$('a').each(function(index, value){
  const link = this.href;

  if (link.match(/https?:\/\//)) {
    console.log(link);
  }
});</code>

Wir müssen keinen Index und Wert einbeziehen. Dies sind nur Parameter, die feststellen, welches DOM -Element wir derzeit iterieren. Darüber hinaus können wir in diesem Fall auch eine bequemere jeder Methode verwenden. Wir können so schreiben:

<code class="language-html"><a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>
<a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a>
<a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a></code>

wir werden in die Konsole kommen:

<code>https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7
https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846
https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1</code>

Beachten Sie, dass wir das DOM -Element in eine neue JQuery -Instanz einwickeln, damit wir die text () -Methode von JQuery verwenden können, um den Textinhalt des Elements zu erhalten.

5. jQuery.each () delay Beispiel

Wenn der Benutzer im nächsten Beispiel auf ein Element mit ID 5Demo klickt, werden alle Listenelemente sofort auf Orange festgelegt.

<code class="language-javascript">const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
  console.log(`${index}: ${value}`);
});</code>

Nach der indexbezogenen Verzögerung (0, 200, 400 ... ms) verblassen wir das Element aus:

<code>0:1
1:2
2:3
3:4
4:5</code>

Schlussfolgerung

In diesem Artikel zeigen wir, wie wir über Dom -Elemente, Arrays und Objekte mithilfe der Funktion jQuery.each () iterieren können. Dies ist eine leistungsstarke und zeitsparende Funktion, die Entwickler in ihr eigenes Toolkit einbeziehen sollten.

Wenn JQuery nicht Ihre bevorzugte Wahl ist, möchten Sie möglicherweise in Betracht ziehen, mit JavaScript native Object.keys() und Array.prototype.forEach() Methoden zu verwenden. Es gibt auch Bibliotheken wie Foreach, die es Ihnen ermöglichen, über Schlüsselwertpaare von Klassenarray-Objekten oder Wörterbuchobjekten zu iterieren.

Denken Sie daran: $.each() und $(selector).each() sind zwei verschiedene Methoden, die auf zwei verschiedene Arten definiert wurden.

(Dieser Artikel wurde im Jahr 2020 aktualisiert, um aktuelle Best Practices widerzuspiegeln und die Schlussfolgerungen über native Lösungen mit dem modernen JavaScript zu aktualisieren. Um mehr über JavaScript zu erfahren, lesen Sie unser Buch JavaScript: vom Anfänger nach Ninja, zweite Ausgabe》)

Häufig gestellte Fragen zu jQuery jeder () Funktion

Was ist der Zweck der .each () -Funktion in jQuery? Die Funktion .each () in JQuery wird verwendet, um eine Sammlung von DOM -Elementen zu iterieren und spezifische Operationen für jedes Element auszuführen.

Wie kann ich die Funktion .each () in jQuery verwenden? Sie können die Funktion .each () verwenden, indem Sie eine Reihe von Elementen mithilfe des Jquery -Selektors auswählen und dann auf dieser Auswahl .ach () aufrufen. Sie geben eine Rückruffunktion an, die die Aktion definiert, die für jedes Element ausführt, um zu finden.

Welche Parameter der Rückruffunktion verwenden .each ()? Die Rückruffunktion akzeptiert zwei Parameter: Index (der aktuelle Index des Elements in der Sammlung) und das Element (das aktuelle DOM -Element, das iteriert wird).

Wie verwendet der Indexparameter in .each () Rückruffunktion? Sie können den Indexparameter verwenden, um die Position des aktuellen Elements in der Sammlung zu verfolgen, was für bedingte Operationen oder andere Operationen sehr nützlich ist.

Was sind einige häufige Anwendungsfälle für die Funktion

.each ()? Zu den gemeinsamen Anwendungsfällen gehört die Iterierung einer Liste von Elementen, um ihre Eigenschaften, Werte oder Stile zu manipulieren und benutzerdefinierte Aktionen für jedes Element in der Sammlung durchzuführen.