项目不在<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/