การทำซ้ำคุณสมบัติของวัตถุ JavaScript โดยใช้ jQuery


116

มีวิธี jQuery ในการทำซ้ำกับสมาชิกของวัตถุหรือไม่เช่นใน:

    for (var member in obj) {
        ...
    }

ฉันไม่ชอบสิ่งนี้ที่forยื่นออกมาจากสัญกรณ์ jQuery ที่น่ารักของฉัน!

คำตอบ:


210
$.each( { name: "John", lang: "JS" }, function(i, n){
    alert( "Name: " + i + ", Value: " + n );
});

แต่ละ


ฉันเดาว่าการแจ้งเตือนnนั้นไม่ถูกต้อง อย่างน้อยก็อาจเป็นได้n.name
ยูจีน

2
@ ยูจีน: ฉันไม่เข้าใจประเด็นของคุณ แต่ละฟังก์ชันใช้อาร์เรย์หรือวัตถุเป็นอาร์กิวเมนต์แรกและฟังก์ชันเป็นวินาที ฟังก์ชันนี้ได้รับการเรียกใช้สำหรับทุกองค์ประกอบในอาร์เรย์ / ทุกคุณสมบัติในออบเจ็กต์ ทุกครั้งที่เรียกใช้ฟังก์ชันจะได้รับดัชนีและค่า / ชื่อและค่าที่ส่งผ่านเป็นอาร์กิวเมนต์ ในตัวอย่างของฉันพารามิเตอร์ "n" คือสองสตริง "John" และ "JS" คุณสมบัติ "name" จะเป็น "ไม่ได้กำหนด"
Tim Büthe

อ๋อ ฉันคิดผิดที่นี่ ฉันคิดว่าทุกคุณสมบัติในออบเจ็กต์เป็นออบเจ็กต์อื่นที่มีชื่อคุณสมบัติเช่นสตริง แน่นอนว่าทั้งหมดนั้นผิด ขอโทษจริงๆ. :)
ยูจีน

4
แต่ละคนได้มีคุณสมบัติอื่น ๆ อีกมากมาย: ยังเป็นthis แบ่งแต่ละวง ...nreturn false
andy

56

คุณสามารถใช้eachสำหรับอ็อบเจ็กต์ได้เช่นกันไม่ใช่เฉพาะสำหรับอาร์เรย์เท่านั้น

var obj = {
    foo: "bar",
    baz: "quux"
};
jQuery.each(obj, function(name, value) {
    alert(name + ": " + value);
});

9

วิธีนี้จะเดินผ่านคุณสมบัติของวัตถุและเขียนลงในคอนโซลโดยเพิ่มการเยื้อง:

function enumerate(o,s){

    //if s isn't defined, set it to an empty string
    s = typeof s !== 'undefined' ? s : "";

    //iterate across o, passing keys as k and values as v
    $.each(o, function(k,v){

        //if v has nested depth
        if(typeof v == "object"){

            //write the key to the console
            console.log(s+k+": ");

            //recursively call enumerate on the nested properties
            enumerate(v,s+"  ");

        } else {

            //log the key & value
            console.log(s+k+": "+String(v));
        }
    });
}

เพียงแค่ส่งวัตถุที่คุณต้องการวนซ้ำผ่าน:

var response = $.ajax({
    url: myurl,
    dataType: "json"
})
.done(function(a){
   console.log("Returned values:");
   enumerate(a);
})
.fail(function(){ console.log("request failed");});

การใช้สิ่งนี้เมื่อค่าเป็นข้อผิดพลาดที่เป็นโมฆะด้วย "Uncaught TypeError: Cannot read property 'length' of null"
JustinStolle

3

ล่าช้า แต่สามารถทำได้โดยใช้Object.keysเช่น

var a={key1:'value1',key2:'value2',key3:'value3',key4:'value4'},
  ulkeys=document.getElementById('object-keys'),str='';
var keys = Object.keys(a);
for(i=0,l=keys.length;i<l;i++){
   str+= '<li>'+keys[i]+' : '+a[keys[i]]+'</li>';
}
ulkeys.innerHTML=str;
<ul id="object-keys"></ul>

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.