ホームページ > ウェブフロントエンド > jsチュートリアル > jquery_jqueryのオブジェクトオブジェクトをループするメソッド

jquery_jqueryのオブジェクトオブジェクトをループするメソッド

WBOY
リリース: 2016-05-16 15:24:42
オリジナル
1740 人が閲覧しました

友人がオブジェクトを配列に変換する方法を尋ねました。なぜそれを変換したいのかと尋ねたところ、配列は js ループを使用して走査できるが、オブジェクトは走査できないと言いました。実際、オブジェクトはループ内で走査することもできます。変換なしでループできる!これは、js または jquery の一部の操作にあまり習熟していないことを意味します。ここで簡単に紹介していきます!

ケース

次のオブジェクトを見てみましょう:

var data={
  张三:69,
  李四:72,
  王五:90,
  二麻子:88,
  前端博客:100,
  haorooms : 98,
  王大壮:99
}
ログイン後にコピー
ログイン後にコピー

上記がバックグラウンドから返されるキーと値のオブジェクトであると仮定します (この種のオブジェクトはよくあると思います!)。次に、このコンテンツをループ内のテーブルにバインドする必要があります。オブジェクトループの操作方法を知らない友達もいます。今日は2つの方法を紹介します!

方法 1:

ループするには $.each を使用してください!

$.each がわからない場合は、オンラインで検索することをお勧めします。もちろん、「jquery の $().each と $.each の違い」を検索することもできます。ここでは違いについて詳しく説明しません。友達の中には $().each をよく使う人もいるかもしれません。今日は主に $.each を紹介します。

$.each() は配列とオブジェクトを走査できます。その方法は次のとおりです:

$.each([{“name”:”haorooms”,”email”:”bb@126.com”},{“name”:”qianduan”,”email”:”aa@hao.com”}],function(i,n)
{
alert(“索引:”+i,”对应值为:”+n.name);
});
ログイン後にコピー

次のようにトラバースすることもできます:

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});
ログイン後にコピー

出力: 1 2 3 4 5
最も良い点は、配列を走査できることです:

var obj =data;//上面复制的data
$.each(obj, function(key, val) {
alert(obj[key]);//可以输出成绩
console.log(key);//可以输出姓名
});
ログイン後にコピー

方法 2:

for in ループを使用して obj を走査します

上記のオブジェクトの場合、ループするには次のように記述できます。

for(var i in data){
 console.dir(i);//输出姓名
 console.dir(data[i]);//输出分数
}
ログイン後にコピー

for in ループについては誰もがよく知っているはずです。最も一般的に使用される for ループは for(var i=0;i

さらに、次のオブジェクトに遭遇した場合:

var data={
  张三:69,
  李四:72,
  王五:90,
  二麻子:88,
  前端博客:100,
  haorooms : 98,
  王大壮:99
}
ログイン後にコピー
ログイン後にコピー

data.haorooms を使用すると 98 を取得できますが、「data.Front-end Blog」を使用するとエラーが報告されるため、キー値として漢字を使用する場合は data[" を使用する必要があります。フロントエンド ブログ] を選択するとき、この方法で選択すると、ドットは使用されなくなります。

上記は、jquery でオブジェクトをループする方法です。皆さんの学習に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート