자바 스크립트 개체 하위 하위

Question

도 포럼에서 비슷한 문제를 찾을 수 없었으므로 도움을 받으시기 바랍니다.

자바 스크립트를 사용하여 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 목록에 포함됨).

들으

Answer 1

이 줄 ...

$('.blog-list') 

는 ... 모든 라이브 DOM에서 클래스 blog-list와 요소, 그리고 방금 만든 바로 하나를 선택합니다. I는 상기 루프 아래 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); 
} 

주의 :이 문제를 해결 한 가지 가능한 방법은 <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의 위협을 제거합니다. 그럴 필요가 없다면 첫 번째 스 니펫에 나와있는 기법을 다시 사용하십시오.