for in 循环仅适用于对象中的最后一个键

Question

heres the objects to be run through :

var content = {

book_1: {

    nameyo: "Doctor who",
    subject: "Books",
    price: "$10,000",
    tags: ["BOOK", "FUNNY", "KIDS", "STUPID"]

},

book_2: {

    nameyo: "Chica boom",
    subject: "Books",
    price: "$10,000",
    tags: ["BOOK", "FUNNY", "KIDS", "STUPID"]

},

Album_1: {

    nameyo: "Beatles",
    subject: "Music",
    price: "$10,000",
    tags: ["MUSIC", "BEATLES", "GOOD", "STUPID"]

},

Album_2: {

    nameyo: "ACDC",
    subject: "Music",
    price: "$10,000",
    tags: ["MUSIC", "ACDC", "GOOD", "STUPID"]

}

};

and here's the jquery

function createIDForName(key) {
return key + "blah";
}
function createIDForType(key) {
return key + "okay";
}
function createIDForPrice(key){
return key+"stuff";
}

for (var key in content) {
    $(".row").append($("<div class=col-3>")).append($("<p class=name>")).append($("<p class=type>")).append($("<p class=price>"));


    $(".name").attr("id", createIDForName(key));

    $(".type").attr("id", createIDForType(key));

    $(".price").attr("id", createIDForPrice(key));

}

So when this all generates, it only does it for the last key in the content object, Album_2. Why is this? Or is it overriding each time? If yes, why so? Any help is appreciated.

Answer 1

You could also use the .each() method to do this. Additionally I condensed your createID() functions into one function with another argument, and made the JSON valid. DEMO

var content = {
    'book_1': {
        'nameyo': "Doctor who",
        'subject': "Books",
        'price': "$10,000",
        'tags': ["BOOK", "FUNNY", "KIDS", "STUPID"]
    },
    'book_2': {
        'nameyo': "Chica boom",
        'subject': "Books",
        'price': "$10,000",
        'tags': ["BOOK", "FUNNY", "KIDS", "STUPID"]
    },
    'Album_1': {
        'nameyo': "Beatles",
        'subject': "Music",
        'price': "$10,000",
        'tags': ["MUSIC", "BEATLES", "GOOD", "STUPID"]
    },
    'Album_2': {
        'nameyo': "ACDC",
        'subject': "Music",
        'price': "$10,000",
        'tags': ["MUSIC", "ACDC", "GOOD", "STUPID"]
    }
};

function createID(key, type) {
    return key + type;
}

$.each(content, function(key, val){
    var col  = '<div class="col-3"><p class="name" id="' + createID(key, 'blah') + '"></p><p class="type" id="' + createID(key, 'okay') + '"></p><p class="price" id="' + createID(key, 'stuff') + '"></p></div>';
    $(".row").append(col);
});

Answer 2

In the result you will have several dom elements with the same classes: .name, .type, .price and then you get them all and override their values over and over again. So in the result you have the last key values;

Answer 3

The selectors $(".name") , $(".price") etc. matches all elements with the class name , not just the one you just appended, but the others you've appended before as well, so you end up with the same values for all of them.

To avoid that, and make life easier, just keep a reference to the elements

for (var key in content) {
   var _name = $('<p />', {'class' : 'name'}); //note that window.name exists
                                               // be careful with the name "name"

   _name.attr("id", createIDForName(key));

The easiest would be to just add the ID when the elements are created

for (var key in content) {
    var _col  = $('<div />', {'class' : 'col-3'}),
        _name = $('<p />', {'class' : 'name',  id : createIDForName(key)}),
        _type = $('<p />', {'class' : 'type',  id : createIDForType(key)}),
        _pric = $('<p />', {'class' : 'price', id : createIDForPrice(key)});

    $(".row").append(_col, _name, _type, _pric);
}