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

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 元素[因为浏览器试图更正标记闭包]。

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

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

希望对你有帮助!