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