Question

1. I create a menu with a javascript object and jquery. I have certain items that needs to be in the <ul></ul> but instead they’re beneath it.

   http://jsfiddle.net/MWBt6/

2. I have ‘Index’ for example. In there I want to append a list of items.

   I know the category id is 0 and the item id is 2, i stored those things in the data attribute.

Now how can I append a ul to that one?

Answer 1

That’s not how append works. You need to create the elements on their own. Here:

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.