Question

我创建了一个带有javascript对象和jquery的菜单。我有一些项目需要在<ul></ul>中，但它们在它之下。

http://jsfiddle.net/MWBt6/
我有'索引'例如。在那里，我想附加一个项目列表。

我知道类别ID为0且项目ID为2，我将这些内容存储在数据属性中。

现在如何将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)
        );
    }
});

Here's the updated jsFiddle.

Answer 2

您尝试追加，就像DOM是文本编辑器一样。您不能使用它的开始标记追加元素的开头，然后使用结束标记的追加来关闭该元素。只能将完整的有效元素插入DOM中。

相反，构建一个html字符串，然后只在字符串完成后添加一个。这种方法比多次追加更有效

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

不属于<ul> </ul>的项目

2 个答案: