Javascript 不在<；ul></ul>；

我创建了一个带有javascript对象和jquery的菜单。我有一些物品需要放在

中，但它们却在下面

例如，我有“索引”。在那里，我想附加一个项目列表

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

---

现在，我如何才能将ul附加到该ul上？

这不是

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)
        );
    }
});​

var loadPath=“resources/books/book1/”；
变量菜单={
数据：[{
名称：“书”，
id:0，
项目：[{
名称：“引言”，
id:0，
目标：“inleiding.html”
}, {
名称：“内容”，
身份证号码：1
}, {
名称：“索引”，
身份证号码：2
}]
}, {
姓名：“我的东西”，
id:1，
项目：[{
名称：“附注”，
身份证号码：0
}, {
名称：“标记”，
身份证号码：1
}]
}, {
名称：“其他”，
id:2，
项目：[{
名称：“搜索”，
身份证号码：0
}, {
姓名：“继续阅读”，
身份证号码：1
}]
}]
}
$（文档）.ready（函数（）{
var$menu=$（“#menu”）；
对于（变量i=0；i”）；
对于（var j=0；j'）.attr（'data-itemId'，itemId）.text（items[j].name））；
}
$menu.append(
$（“
”）.attr（'data-categorieId'，categorieId.）.append（categorieName，list）
);
}
});​

---

这不是

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)
        );
    }
});​

var loadPath=“resources/books/book1/”；
变量菜单={
数据：[{
名称：“书”，
id:0，
项目：[{
名称：“引言”，
id:0，
目标：“inleiding.html”
}, {
名称：“内容”，
身份证号码：1
}, {
名称：“索引”，
身份证号码：2
}]
}, {
姓名：“我的东西”，
id:1，
项目：[{
名称：“附注”，
身份证号码：0
}, {
名称：“标记”，
身份证号码：1
}]
}, {
名称：“其他”，
id:2，
项目：[{
名称：“搜索”，
身份证号码：0
}, {
姓名：“继续阅读”，
身份证号码：1
}]
}]
}
$（文档）.ready（函数（）{
var$menu=$（“#menu”）；
对于（变量i=0；i”）；
对于（var j=0；j'）.attr（'data-itemId'，itemId）.text（items[j].name））；
}
$menu.append(
$（“
”）.attr（'data-categorieId'，categorieId.）.append（categorieName，list）
);
}
});​

---

您正在尝试附加，就好像DOM是一个文本编辑器一样。不能在元素的开头附加开始标记，然后在后面附加结束标记来关闭该元素。只有完整的有效元素才能插入到DOM中

相反，构建一个html字符串，然后在字符串完成后只进行一次追加。这种方法比同时进行多个追加要有效得多

---

正在工作的演示：

您正在尝试附加，就好像DOM是一个文本编辑器一样。不能在元素的开头附加开始标记，然后在后面附加结束标记来关闭该元素。只有完整的有效元素才能插入到DOM中

相反，构建一个html字符串，然后在字符串完成后只进行一次追加。这种方法比同时进行多个追加要有效得多

---

工作演示：

您能解释一下

.append（categorieName，list）

为什么要使用第一个参数吗。我查看了jquery文档，但它并没有真正起到帮助作用。@clankill3r：这只是说“两者都附加”的一种更简单的方式：

.append（categileName）.append（list）

但是categileName是一个字符串，

var categileName=categileName那么为什么要附加它？@clangkill3r:这是类别的名称。在不添加名称的情况下查看JSFIDLE的外观。您能解释一下
.append（categorieName，list）
为什么使用第一个参数吗。我查看了jquery文档，但它并没有真正起到帮助作用。@clankill3r：这只是说“两者都附加”的一种更简单的方式：
.append（categileName）.append（list）
但是categileName是一个字符串，
var categileName=categileName那么为什么要附加它？@clangkill3r:这是类别的名称。在不附加名称的情况下查看JSFIDLE的外观。