带有 .append() 的内部 .each() 循环

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

您不能像这样.append HTML 部分。 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>