不在<ul>内</ul>

Question

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

   http://jsfiddle.net/MWBt6/

2. 我有 '索引' 为例。在那里，我想追加一个项目列表。

   我知道类别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/