附加到子 ul答案

【问题标题】：Append to child ul附加到子 ul
【发布时间】：2015-08-17 12:39:46
【问题描述】：

我想将 li 附加到孩子 ul 但我不知道为什么这不起作用。我有 html 标签：

<ul class="role_module">
    <ul class="role_permission"></ul>
</ul>

还有这个 javascript：

if (response) {
    $('ul.role_module').empty();

    $.each(response, function (module, value) {
        $("ul.role_module").append($("<li>").text(module));

        $.each(this, function (permission, value) {
            $("ul.role_permission").append($("<li>").text(permission));
        });

    });
 } else {
    alert('Error');
 }

我的数组中的数据如下所示：

array(2) {
   account => array(2) {
      account_view => 2
      account_edit => 2
   }
   admin => array(2) {
      admin_business_partner_view => 4
      admin_business_partner_edit => 4
}

我想要这个结果

帐户
- account_view
- account_edit
管理员
- admin_business_partner_view
- admin_business_partner_edit

但我得到的不是这个，而是没有任何 li 孩子：

帐户
管理员

我做错了什么？

【问题讨论】：

一个<ul> 直接在另一个<ul> 中没有意义。内部 <ul> 应该在列表元素 (<li>) 内。
您在回复{} 或[] 中有什么内容？
@Pointy：我明白了，请问怎样才能达到我想要的结果？
@Jai: 响应是 json 数组
当您调用 empty 时，它将删除 UL，因此您将找不到该 UL。

标签： javascript jquery html css list

【解决方案1】：

请参考以下代码

jQuery

var obj = {
   'account': ['account_view' , 'account_edit'],
    'admin' : ['admin_business_partner_view' ,
      'admin_business_partner_edit']
}

$.each(obj, function (index, value) {    
    $("ul.role_module").append($("<li class='" + index + "'></li>" ).text(index));
    $("ul.role_module").append($("<ul class='role_permission'>"));
    $.each(value, function (permission, value1) {        
        $("li."  + index + "+ ul.role_permission").append($('<li></li>').text(value1));
    });
});

HTML

<ul class="role_module">    
</ul>

参考fiddle

更新

将ul 元素包裹在另一个ul 中并不是很好的做法。一定要得到同样的东西，你应该在父 li 中附加 child ul 元素。

请参考updated-fiddle

【讨论】：

正是我想要的。谢谢。

【解决方案2】：

我猜你应该把你的 javascript 代码改成这样：

if (response) {
    var $roleModule = $(".role_module");
    $roleModule.empty();

    $.each(response, function (module, value) {
        var $roleModuleItem = $("<li />").text(module).append($("<ul class='role_permission' />"));
            $roleModule.append($roleModuleItem);

        $.each(this, function (permission, value) {
            $roleModuleItem.find("ul").append($("<li />").text(permission));
        });

    });
 } else {
    alert('Error');
 }

Working example

【讨论】：