【JQuery】 ループ処理 連想配列や要素の値をループで取得する

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

Object.keys().forEach

連想配列の値を取得

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

//連想配列
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]);
});

結果は以下の通りです。

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

$.each

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

連想配列の値を取得

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

結果は以下の通りです。

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

$.eachで子要素取得

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

HTML

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

ループ

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

結果は以下の通りです。

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

感覚的に$.eachが気に入っています。

Share this content: