jQuery ループ処理 連想配列や要素の値をループで取得

jQueryで連想配列や要素の値をループで取得する方法について紹介します。

Object.keys().forEach

連想配列の値を取得

Object.keysを使用すると連想配列をループで回して、keyと値を取得することができます。

ループ

1 2 3 4 5 6 7 8

//連想配列 var param = {user_id:1, user_name:"山田 太郎", user_sex:1};   //ループで取得 Object.keys(param).forEach(function(key){     console.log("key="+key);     console.log("val="+param[key]); });

結果は以下の通りです

結果

1 2 3 4 5 6

key=user_id val=1 key=user_name val=山田 太郎 key=user_sex val=1

$.each

更に$.eachの方法でも可能です。

連想配列の値を取得

$.eachでのループ

1 2 3 4 5 6 7 8

//連想配列 var param = {user_id:1, user_name:"山田 太郎", user_sex:1};   //ループで取得 $.each(param, function(key, item){     console.log("key="+key);     console.log("val="+item); });

結果は以下の通りです

結果

1 2 3 4 5 6

key=user_id val=1 key=user_name val=山田 太郎 key=user_sex val=1

$.eachで子要素取得

$.eachでは要素のループも可能です。

HTML

要素でのループ

1 2 3 4 5 6

<ul class="list">     <li>日本</li>     <li>ネパール</li>     <li>インド</li>     <li>アメリカ</li> </ul>

ループ

ループ

1 2 3 4

//ループで取得 $.each($(".list li"), function(idx, li){     console.log(idx+':'+$(li).text()); });

結果は以下の通りです

結果

1 2 3 4

0:日本   1:ネパール   2:インド   3:アメリカ