jQuery-Loop-Through-Elemente
-
Verwenden Sie die
.each()-Methode, um Listenelemente zu durchlaufen -
Verwenden Sie die Methode
.each(), um Tabellendaten mit derselben Klasse zu zählen
Um HTML-Elemente zu durchlaufen, verwenden wir die Methode .each(). Am Anfang dieser Funktion wählen wir den Elementbaum aus, der durchlaufen werden muss.
Und in der Klammer der Methode addieren wir eine Funktion mit Parametern, dem Index und dem Wert.
In diesem Prozess ist der Wert, den wir erhalten, meistens im text()-Format, auch bekannt als String. Wenn wir es mit einer numerischen Liste zu tun haben, wird sie als Zeichenfolge abgerufen, und später können wir sie je nach Präferenz konvertieren.
In den folgenden Beispielen visualisieren wir eine ähnliche Instanz, die das Konzept der .each()-Methode zum Iterieren von Elementen verdeutlicht.
Verwenden Sie die .each()-Methode, um Listenelemente zu durchlaufen
Hier werden wir ein Beispiel geben, bei dem wir einen Stapel von Listen haben. Und indem wir uns auf das li konzentrieren, werden wir Iterationen durchführen.
Also setzen wir kurz vor der .each()-Methode den Namen des Schleifenelements. Und fügen Sie später eine Funktion hinzu, die das Konto zum Speichern des Index und der Werte verwendet.
Mal sehen, wie es funktioniert.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<ul id="mylist">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var sum = 0;
$("li").each(function(index, elem){
sum+=parseInt( $( this ).text(), 10 );
});
console.log("Sum of the li elements: " + sum);
</script>
</div>
</body>
</html>
Ausgang:
In diesem Beispiel haben wir die Instanzen von li geschnappt und .each() verwendet. Die Parameter index und elem speichern die Indexnummern und die HTML-Objektdetails für jedes Element.
Es wird also umständlich, mit dem elem umzugehen. Also haben wir den Inhalt von li als text(string) abgerufen und ihn später in eine ganze Zahl geparst.
Wir werden ein weiteres Beispiel sehen, das definiert, wie die Indizes funktionieren.
Verwenden Sie die Methode .each(), um Tabellendaten mit derselben Klasse zu zählen
Da wir die Funktionsweise der Methode .each() bereits kennen, springen wir hier direkt zum Codesegment zur Visualisierung der Ergebnisse.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>array loop through</title>
</head>
<body>
<table class="tbl" border=2>
<tr>
<td>D1</td>
<td>D2</td>
</tr>
<tr>
<td>D3</td>
<td>D4</td>
</tr>
</table>
<script>
var cnt = 0;
var ar = []
$("td").each(function(index, elem){
$(elem).addClass('table');
});
$(".table").each(function(index, elem){
ar[cnt]=index;
cnt++;
});
console.log("Total data count: " + cnt);
console.log("The indexes: " + ar);
</script>
</div>
</body>
</html>
Ausgang:
Der Parameter index erfasst also die numerischen Werte, und somit erhalten wir die Anzahl der Tabellendaten und die Darstellung in einem Array.
Außerdem können Sie dieselben kategorisierten Daten in einer bestimmten Klasse benennen, indem Sie den Parameter elem wie unten greifen.
$('td').each(function(index, elem) {
$(elem).addClass('table');
});
