내부 .each() - .append() 루프

Question

프로젝트 배열이 있습니다. 프로젝트는 하위 프로젝트를 가질 수 있으므로 parent_id 필드가 있습니다. 하위 프로젝트 목록을 표시하고 각 하위 프로젝트에 대해 해당 하위 프로젝트의 prio1 하위 프로젝트를 미리보고 싶습니다.

그래서 두 개의 .each() - 루프가 있고 .append()를 사용하여 HTML (내부 및 외부)을 추가합니다.

미리보기 하위 프로젝트는 project-div가 아닌 목록 맨 위에 있습니다.

어떤 아이디어가 잘못 되었나요?

 var filterdata = this.get_subprojects(project_id); 
     // **** OUTER LOOP ******* 
     filterdata.forEach(function(project) { 
      var subprojects = projectList.get_subprojects(project.project_id, 1); 

     $("#projects>.list").append(
     '<div class="project">' 

      +'<div class="left">' 
       +'<img class="prio-icon" src="img/prio'+project.prio+'.png"/>' 
       +'<img class="type-icon" src="img/type'+project.type+'.png"/>' 
      +'</div>' 

      +'<div class="right">' 
       +'<div class="title">'+project.title+'</div>' 
       +'<div class="next_action_div" >'); 

      //*** INNER LOOP LOOP FOR PREVIEW ***** 
       subprojects.forEach(function(subproject,1) { 
        $("#projects>.list").append(
        +'<span class="next_action">'+subproject.title+'</span>');     

       }); 

      $("#projects>.list").append(
       '</div>' 
      +'</div><!-- end center -->' 
      +'<div style="clear:both;"></div>' 
     +'</div> <!-- end subitem -->'); 
     return $("#projects>.list").html(); 
     }); 

Answer 1

HTML의 섹션은 .append 수 없습니다. HTMLstring.append()은 올바른 HTLM 컨텐츠를 예상합니다. 해당 문자열의 태그는 자동으로 닫힙니다.

대신이 시도

:

$('#container').append('<div id="outer">Outer div</div>'); 
 
$("#outer").append("<div>Inner div</div>"); // As example why your code doesn't work: 
 
$("#outer").append("<div>Broken div (Check the rendered HTML, the tag will be fixed)");

div{ 
 
    border: solid 1px black; 
 
    padding: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"></div>