◆20200827 授業メモ　jQuery　eachメソッド

授業メモ

要約

○eachメソッド

処理の繰り返しを行う際に使用するもの。

 $('要素名').each(function(index, element){
   「処理内容」
 console.log(index + ':' + $(element).html());
  })

index→0からカウントされた数字（iと略する場合もある）

element→無名関数で使用するもの（eと略する場合もある）

例）

$('.box2 .target li').each(function (i, e) {

$(e).append('さん');

});

この記述でHTML上のliタグに複数書かれている文字に「さん」を加えることができる。

※ i＝繰り返し所の回数

※e＝liのリストを指す

○配列とeachメソッドを使った文

配列リスト
var array = ['Rails', 'jQuery', 'FuelPHP'];

表示させる記述方法
$.each(array, function(index, value){
  console.log(index + ':' + value);
});

ブラウザ表示
0:Rails
1:jQuery
2:FuelPHP

$.eachと特殊な使い方をする

〇eachメソッド



  //   < !DOCTYPE html >
  //     <html lang="ja">
  //       <head>
  //         <meta charset="UTF-8">
  // <meta name="viewport" content="width=device-width, initial-scale=1.0">
  //             <title>jQueryを試してみる</title>
  //             <link rel="stylesheet" href="css/style.css">
  // </head>
  //             <body>
  //               <div class="box">
  //                 <div class="inner">
  //                   <div class="box1">
  //                     <h1>サンプル１</h1>
  //                     <ul class="target">
  //                       <li>項目１</li>
  //                       <li>項目２</li>
  //                       <li>項目３</li>
  //                     </ul>
  //                   </div>


  //                   <div class="box2">
  //                     <h1>サンプル２</h1>
  //                     <ul class="target">
  //                       <li>佐藤</li>
  //                       <li>鈴木</li>
  //                       <li>佐々木</li>
  //                     </ul>
  //                   </div>
  //                 </div>
  //               </div>


  < script src = "https://code.jquery.com/jquery-3.5.1.min.js" ></ >
    <script>
      $(function () {
        // サンプル１
        $('.box1 .target li').each(function (index, element) {
          console.log(index + ':' + $(element).html());
          // 第一引数：0からカウントされた数値
          // 第二引数に無名関数で使用する
          // HTML要素オブジェクトが代入される
          // 無名関数内で使用するときは$()で囲むことで
          // jQueryインスタンスでラップしてjQueryメソッドを使用できるようになる。
        });


      // 練習１
      // サンプル２を使用して答えること
      // 名前に敬称「さん」をつけて表示すること


      $('.box2 .target li').each(function (i, e) {
        $(e).append('さん');


        // i＝繰り返し所の回数
        // e＝liのリストを指す
      });


    });
  </script>
            </body >
</html >

alienHRNの訓練日記

IT業界初心者で勉強中。

◆20200827 授業メモ　jQuery　eachメソッド