javascript - 如何使用 jquery 清空嵌套 <li> 中的 <ul>

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

试试这个看起来像你想要的我在这里模拟了它 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();
    });
  }); 
});