項目不在<ul></ul>

Question

1. 我創建一個帶有javascript對象和jquery的菜單。 我有某些項需要放在<ul></ul>但它們在其下方。

   http://jsfiddle.net/MWBt6/

2. 例如，我有“索引”。 在這里，我要附加一個項目列表。

   我知道類別ID為0，項目ID為2，我將這些內容存儲在data屬性中。

現在，我如何在該對象后附加ul？

Answer 1

那不是append工作原理。 您需要自己創建元素。 這里：

var loadPath = "resources/books/book1/";

var menu = {
    data: [{
        name: "the book",
        id: 0,
        items: [{
            name: "Introduction",
            id: 0,
            target: "inleiding.html"
        }, {
            name: "Content",
            id: 1
        }, {
            name: "Index",
            id: 2
        }]
    }, {
        name: "my stuff",
        id: 1,
        items: [{
            name: "Notes",
            id: 0
        }, {
            name: "Marks",
            id: 1
        }]
    }, {
        name: "other",
        id: 2,
        items: [{
            name: "Search",
            id: 0
        }, {
            name: "Continue Reading",
            id: 1
        }]
    }]
}

$(document).ready(function() {
    var $menu = $('#menu');

    for(var i = 0; i < menu.data.length; i++) {
        var categorie = menu.data[i];
        var categorieName = categorie.name;
        var categorieId = categorie.id;
        var items = categorie.items;

        console.log("categorieName: " + categorieName);

        var list = $('<ul>');

        for(var j = 0; j < items.length; j++) {
            var itemId = items[j].id;
            list.append($('<li>').attr('data-itemId', itemId).text(items[j].name));
        }

        $menu.append(
            $('<li>').attr('data-categorieId', categorieId).append(categorieName, list)
        );
    }
});​

這是更新的jsFiddle。

Answer 2

您試圖將DOM視為文本編輯器進行追加。 您不能在元素的開頭加上開始標記，然后再在其后面加上結束標記來關閉該元素。 只能將完整的有效元素插入DOM。

相反，構建一個html字符串，然后在字符串完成后僅追加一個。 這種方法比執行多個附加操作還要有效得多

工作演示： http : //jsfiddle.net/MWBt6/3/