如何清空 <ul> 在巢里 <li> 使用jquery

Question

我正在嘗試創建一個菜單及其子菜單，但是從數據庫接收數據。 我成功創建了菜單，這是我的代碼：

 $(document).ready(function () {
    var url = '<%: Url.Content("~/") %>' + "Products/GetMenuList";
    $.getJSON(url, function (data) {
    var mainMenu = $("#content ul#navmenu-v");
        $.each(data, function (index, dataOption) { 
           var new_li = $("<li id='level1'><a href='javascript:void(0);' id='" 
                       + dataOption.ID + "' class ='selectedcategory'>" + 
                       dataOption.Name + "</a>");
        mainMenu.append(new_li);

    });
     $('.selectedcategory').mouseover(function () {
     $("ul#subCat").empty();
     $("li#level1").append("<ul id='subCat'>");
     var urlCat = '<%: Url.Content("~/") %>' + "Products/GetCategoryList";
        $.getJSON(urlCat, { Depid: this.id }, function (dataCat) {
           $.each(dataCat, function (indexCat, dataOptionCat) {
           $("ul#subCat").append("<li><a href='javascript:void(0);' 
              class='selectedsubcat' id='" + dataOptionCat.id + "'>" + 
                dataOptionCat.Name + "</a></li></ul></li>");
           });
       });
   }); 
  });
});

這是HTML：

<div id="content">
 <ul id='navmenu-v'>
 </ul>
</div>

但由於主菜單，它沒有得到正確的子菜單。 請問有人給我一些建議。

非常感謝。

Answer 1

我認為你正在以錯誤的順序關閉你的HTML，你正在關閉每個循環中的UI及其外部LI

Answer 2

嘗試這看起來像你想要的我在這里模擬它http://jsfiddle.net/d4udts/W9cCE/5/

$(document).ready(function () {


  var url = '<%: Url.Content("~/") %>' + "Products/GetMenuList";
  $.getJSON(url, function (data) {

    var mainMenu = $("#content ul#navmenu-v");
    $.each(data, function (index, dataOption) {
       var new_li = $("<li class='level1'><a href='javascript:void(0);' id='"+ dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
       mainMenu.append(new_li);

    });

    $('.level1').hover(function(){
       $(this).append("<ul class='subCat'></ul>");
       var ul=$(this).children('ul');

       var urlCat = '<%: Url.Content("~/") %>' + "Products/GetCategoryList";
       $.getJSON(urlCat, { Depid: $(this).find('a.selectedcategory').attr('id')}, function (dataCat) {

         $.each(dataCat, function (indexCat, dataOptionCat) {
           $(ul).append("<li><a href='javascript:void(0);'" +
           "class='selectedsubcat' id='" + dataOptionCat.id + "'>" +
            dataOptionCat.Name + "</a></li>");
          });
        });
      },function(){
      $(this).children('ul').remove();
    });
  }); 
});