[jQuery] 配列要素に対して繰り返し処理を行う（$.each）

投稿日：2018年10月6日

配列要素に対して繰り返し処理を行うには、.each()を使用します。

サンプルソース

例１）ボタンを押すと、配列の全要素をコンソールに出力する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>$.eachサンプル</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){

  $('#btn1').click(function(){

    //配列を生成
    var arr = new Array();
    arr.push("aaa");
    arr.push("bbb");
    arr.push("ccc");

    //配列を全件読込みコンソールに出力する
    $.each(arr, function(idx, val){
      console.log(idx, val);
    });

  });
});
</script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン">
</body>
</html>

<!DOCTYPE html>

<head>

<title>$.eachサンプル</title>

$(function(){

$('#btn1').click(function(){

//配列を生成

var arr = new Array();

arr.push("aaa");

arr.push("bbb");

arr.push("ccc");

//配列を全件読込みコンソールに出力する

$.each(arr, function(idx, val){

console.log(idx, val);

});

</script>

</head>

<body>

</body>

</html>

（例１の結果）: 0 "aaa" 1 "bbb" 2 "ccc"

例２）ボタンを押すと、li要素の内容をコンソールに出力する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>eachサンプル</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){

  $('#btn1').click(function(){
    //li要素を全件読込みコンソールに出力する
    $('ul.list01 li').each(function(idx, elm){
      var a = $(elm).text();
      console.log(idx, a);
    });
  });

});
</script>
</head>
<body>
  <ul class="list01">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
  </ul>

  <input type="button" id="btn1" value="ボタン">
</body>
</html>

<!DOCTYPE html>

<head>

<title>eachサンプル</title>

$(function(){

$('#btn1').click(function(){

//li要素を全件読込みコンソールに出力する

$('ul.list01 li').each(function(idx, elm){

var a = $(elm).text();

console.log(idx, a);

});

</script>

</head>

<body>

</ul>

</body>

</html>

（例２の結果）: 0 "aaa" 1 "bbb" 2 "ccc"

解説

第１引数に、対象の配列を指定します。
第２引数に、functionを指定します。要素ごとにこのfunctionが呼び出されます。

執筆者：とら