为什么列表元素出现在无序列表之外？

Question

我有一个动态添加的列表，从对象数组中获取其值。但是，在查看检查器时，它会在结束ul标记之后显示列表元素，但样式仍在应用，就像列表元素位于ul元素内一样。为什么会这样？

HTML

<div id="portfolio_page" class="page">
    <aside>
    </aside>
</div>

JS

var Portfolio = {
    Completed: ["SPARTAN", "Custom Select Menu", "Popup"],
    Ongoing: ["Hello"],
    Future_Projects: [],
    Clients: []
}

for(var key in Portfolio){
    var item = key.replace("_", " ");
    $("#portfolio_page aside").append("<h1>" +item +"</h1><ul>");
    for(var i = 0; i < Portfolio[key].length; i++){
        $("#portfolio_page aside").append("<li>" + Portfolio[key][i]+"</li>");
        console.log(key[i]);
    }
    $("#portfolio_page aside").append("</ul>");
}

FIDDLE

Answer 1

您需要首先创建无序列表，然后将其附加到主容器...

 $("#portfolio_page aside").append("<h1>" +item +"</h1>");
  var $ul = $("<ul></ul>");
for(var i = 0; i < Portfolio[key].length; i++){
    $ul.append("<li>" + Portfolio[key][i]+"</li>");
    console.log(key[i]);
}
$("#portfolio_page aside").append($ul);

您正在获取无序列表之外的元素，因为当您在循环外打开它时[使用结束标记]。自动创建ul元素[因为浏览器试图纠正标记闭包]。

当附加列表元素时，它没有被附加到列表[因为它已经被浏览器关闭]，而是被附加到主容器，因为它之前已经存在，所以它被正确引用。

因此，每当需要添加包含单个项目的新容器时，请确保获取对它的引用，向其添加项目，最后将该元素添加到主容器中，以便显示它。

希望它有所帮助！