jQuery eachメソッドを使って配列の要素を繰り返し処理するサンプル
環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1
構文
$.each(配列,function(インデックスの変数,値の変数) {
// 繰り返す処理コード
});
配列の要素1つずつに対して処理を行います。
functionの1つめの引数はインデックスです。
functionの2つめの引数は要素です。
セレクタの指定はありません。
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
// 配列の定義
const cityArr= ["東京","大阪","福岡"];
// 配列を繰り返し処理する
$.each(cityArr,function(key,val) {
// 配列のインデックスと値を出力する
console.log( key + ": " + val);
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
// 配列の定義
const cityArr= ["東京","大阪","福岡"];
// 配列を繰り返し処理する
$.each(cityArr,function(key,val) {
// 配列のインデックスと値を出力する
console.log( key + ": " + val);
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> // 配列の定義 const cityArr= ["東京","大阪","福岡"]; // 配列を繰り返し処理する $.each(cityArr,function(key,val) { // 配列のインデックスと値を出力する console.log( key + ": " + val); }); </script> </head> <body> </body> </html>
実行結果
0:東京
1:大阪
2:福岡