要素を介したjQueryループ
HTML 要素をループするには、.each() メソッドを使用します。 この関数の頭文字で、トラバースする必要がある要素ツリーを選択します。
メソッドの括弧内に、パラメーター、インデックス、および値を持つ関数を追加します。
このプロセスで取得する値は、ほとんど text() 形式、つまり文字列です。 数値リストを扱う場合は、文字列として取得され、後で好みに応じて変換できます。
次の例では、要素を反復する .each() メソッドの概念を明確にする同様のインスタンスを視覚化します。
.each() メソッドを使用してリスト要素をループする
ここでは、リストのスタックがある例を設定します。 そして、li に注目して、イテレーションを実行します。
そのため、.each() メソッドの直前に、ループ要素の名前を設定します。 そして後で、アカウントを使用してインデックスと値を保持する関数を追加します。
それがどのように機能するか見てみましょう。
<!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>
出力：
この例では、li のインスタンスを取得し、.each() を使用しています。 index および elem パラメータは、各要素のインデックス番号と HTML オブジェクトの詳細を格納します。
そのため、elem を処理するのは面倒です。 そのため、li コンテンツを text(string) として取得し、後でそれを整数に解析しました。
インデックスがどのように機能するかを定義する別の例を見ていきます。
.each() メソッドを使用して同じクラスのテーブル データをカウントする
.each() メソッドの機能は既にわかっているので、ここでは結果を視覚化するためのコード セグメントに直接ジャンプします。
コードスニペット：
<!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>
出力：
つまり、index パラメータは数値を取得しているので、テーブル データの数と配列での表現を取得します。
また、以下のように elem パラメータを取得することで、特定のクラスで同じ分類データに名前を付けることができます。
$('td').each(function(index, elem) {
$(elem).addClass('table');
});
