HOME > > > > >

.each()

引数

(function) function
関数

jQuery オブジェクトが保持しているDOM要素に対して繰り返し処理をおこなう。

サンプル

実行結果

  • Javascript
  • PHP
  • HTML

Javascript

  1.  
  2. $('.jq-sample1 .execute').on('click', function(){
  3.     $('.jq-sample1 li').each(function(){
  4.         $(this).css('border', '2px solid red');
  5.     });
  6. });
  7.  

HTML

  1.  
  2. <div class="jq-sample1">
  3.     <button class="cq-btn execute">実行</button>
  4.     <ul>
  5.         <li>Javascript</li>
  6.         <li>PHP</li>
  7.         <li>HTML</li>
  8.     </ul>
  9. </div>
  10.  

eachの引数であるfunctionはインデックス番号 i とDOM要素 element を引数として受け取ることができる。

サンプル

実行結果

  • Javascript
  • PHP
  • HTML

Javascript

  1.  
  2. $('.jq-sample2 .execute').on('click', function(){
  3.     var str = '';
  4.     $('.jq-sample2 li').each(function(i, element){
  5.         str += i + ' : ' + element.innerText + '<br />';
  6.     });
  7.     $('.jq-sample2 .display').html(str);
  8. });
  9.  

HTML

  1.  
  2. <div class="jq-sample2">
  3.     <button class="cq-btn execute">実行</button>
  4.     <ul>
  5.         <li>Javascript</li>
  6.         <li>PHP</li>
  7.         <li>HTML</li>
  8.     </ul>
  9.  
  10.     <hr />
  11.  
  12.     <div class="display"></div>
  13. </div>
  14.