Question

我有一系列项目。项目可以有子项目，因此字段为parent_id。我想显示一个子项目列表，每个子项目我想“预览”该子项目的prio1子项目。

所以我有两个.each（） - 循环并使用.append（）来添加HTML（INNER和OUTER）。

由于某种原因，预览子项目位于列表顶部而不是项目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内容。该字符串中的标签会自动关闭。

请改为尝试：

＆＃13;

$('#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)");

＆＃13;

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

＆＃13;

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

＆＃13;

内部.each（） - 循环使用.append（）

1 个答案: