jQueryのループ処理

JQueryでループ処理をする時のあれこれメモ

基本的には、以下の形式。

 

$.each(リスト,function(インデックス,データ){処理});

 

配列のループ

var list = [ 1, 2, 3, 4 ];

 

$.each(list,function(index,data) {

  console.log(index + ":" + data);

});

 

<結果>

0:1

1:2

2:3

3:4

連想配列のループ

var list = {key:1,data:"a",name:"test"}

 

$.each(list,function(key,data) {

  console.log(key + ":" + data);

});

 

<結果>

key:1

data:a

name:test

$.eachでbreak(中断)とcontinue(スキップ)

$.eachのループでは、breakやcontinueというメソッドは用意されていません。

代わりにbreakreturn falseと記載し、continuereturn trueと記載します。

var list = [{key:1,data:"a",name:"test1"},

{key:2,data:"b",name:"test2"},

{key:3,data:"c",name:"test3"},

{key:4,data:"d",name:"test4"}];

 

$.each(list,function(index,data) {

  if ( data.key < 3 ) return true;

  if ( data.key > 3 ) return false;

  console.log(index+":"+data.name);

});

 

<結果>

2:test3

オブジェクトもループできる

<html>
<body>
  <p>Good Morning</p>
  <p>Hello</p>
  <p>Bye</p>
  <p>See you</p>
</body>
</html>

 

 $.each($("p"),function(index,object) {

  console.log(index+":"+$(object).text());

});

 

<結果>

0:Good Morning

1:Hello

2:Bye

3:See you

オブジェクトのループは以下のように書いてもよい。

 

オブジェクト.each(function(インデックス,データ){処理});

 $("p").each(function(index,object) {

  console.log(index+":"+$(object).text());

});