Quantcast
Channel: ループタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 83

jQueryでeachを使う

$
0
0

jQueryオブジェクトを複数取得した後、ループ処理をしたいのにいつも忘れてしまうeach文の使い方をまとめました。

スキップはreturn true、ブレイクはreturn falseがポイントです。

each文で取得するHTMLはこちら

<ul class="array_test">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

javascriptはこのように記述します。

$('ul.array_test li').each(function(index, element){
  console.log(index + ':' + $(element).html());
});
実行結果
0:item1
1:item2
2:item3
3:item4
4:item5

スキップする(return true)

$('ul.array_test li').each(function(index, element){
  if(index == 3){
    return true;
  }
  console.log(index + ':' + $(element).html());
});
実行結果
0:item1
1:item2
2:item3
4:item5

途中でブレイク(return false)

$('ul.array_test li').each(function(index, element){
  if(index == 3){
    return false;
  }
  console.log(index + ':' + $(element).html());
});
実行結果
0:item1
1:item2
2:item3

Viewing all articles
Browse latest Browse all 83

Trending Articles