javascript object sub children

Question

フォーラムで同様の問題を見つけることができませんでしたので、お手伝いできることを願っています。

私は、javascriptを使用してHTMLとして別のリストとして追加したいと思うマルチレイヤオブジェクトを持っています。

var obj = [ 
    { 
    month: "A", 
    content: [ 
     { 
     name: "A-content", 
     image: "A-image" 
     } 
    ] 
    }, 
    { 
    month: "B", 
    content: [ 
     { 
     name: "B-content", 
     image: "B-image" 
     } 
    ] 
    } 
]; 

そして、ここで私がループしています方法です：ここで

はobjが構築されているかである第二のループに

for (var i = 0; i < obj.length; i++) { 
var contents = obj[i].content; 

// Create list 
var blogList = '<ul class="blog-list"></ul>'; 

// Append list 
$('body').append(blogList); 

    for(var j = 0; j < contents.length; j++) { 
    var blogName = contents[j].name, 
     blogImage = contents[j].image; 

    // How to append these sub element to corresponding parent ??? 
     $('.blog-list').append('<li>'+ blogName + blogImage +'</li>') 
} 
} 

は、子どもたちがなく、両親の対応に表示されます。 （例：私はBの子どもをAリストに入れました）。

Thxを

Answer 1

この行...

$('.blog-list') 

... すべてライブDOMからクラスblog-listを持つ要素だけではなく、作成しただけで一つを選択します。私はさらにループダウンbodyにその要素を追加する移動

for (var i = 0; i < obj.length; i++) { 
    var contents = obj[i].content; 

    // Create list 
    var $blogList = $('<ul class="blog-list"></ul>'); 
    for(var j = 0; j < contents.length; j++) { 
    var blogName = contents[j].name, 
     blogImage = contents[j].image; 

    // reusing the $blogList element 
    $blogList.append('<li>'+ blogName + blogImage +'</li>'); 
    } 

    // Append list 
    $('body').append($blogList); 
} 

注意：この問題を回避する1つの可能な方法は、<li> -sを追加するとき、それを再利用し、jQueryの-ラップ（<ul>）要素を記憶しています。この特定のスニペットでは問題にはなりませんが、通常は「生きている」DOMへの追加を可能な限り延期する方がよいでしょう。

があなたの代わりにbloglistsの配列を使用して、このアイデアを拡張することができます：それは完全に用意しています場合にのみ、

var bloglists = obj.map(function(contents) { 
    var $bloglist = $('<ul class="blog-list"></ul>'); 
    contents.forEach(function(blogData) { 
    var $li = $('<li></li>'); 
    $li.text(blogData.name + blogData.image); 
    $bloglist.append($li); 
    }); 
    return $bloglist[0]; 
}); 

$('body').append(bloglists); 

このコードだけでなく、更新はDOMを生きる、それはまた、不正なblogNameとblogImage値からのXSSの脅威を排除します。それが必要でない場合は、最初のスニペットに記載されている手法を再利用してください。