Jquery 中each迴圈嵌套的使用樣本教程

標籤：

1、從MVC返回的Json資料如下：

2、下面是用戶端實現的樣本：

$.post("/admin/GetPermissionsForRole", function (data,status) {if (status == "success") {    var ghtml = "";    $.each(data, function (i, items) { //items相當於二維數組裡的每一個一維數組        if (items["ParentPermissionId"] == "")        {            ghtml += "<div class=‘panel panel-transparent‘> <ul class=‘list-group‘>";            ghtml += "<div class=‘panel-heading‘><i class=‘fa fa-list-ul‘></i>&nbsp;<span class=‘panel-title text-bold‘>" + items["PermissionName"] + "</span></div>";            ghtml += "<ul class=‘list-group‘>";            $.each(data, function (i, sitems) {                if (sitems["ParentPermissionId"] == items["PermissionId"])                {                    ghtml += "<li class=‘list-group-item‘>";                    ghtml += "<h6 class=‘text-bold text-semibold text-xs‘ style=‘margin:20px 0 10px 0‘>";                    ghtml += "<label class=‘px-single‘><input type=‘checkbox‘ class=‘px‘><span class=‘lbl‘>&nbsp;</span></label>&nbsp;&nbsp;" + sitems["PermissionName"];                    ghtml += "</h6>";                    ghtml += "<p>";                    $.each(data, function (i, ssitems)                    {                     if (ssitems["ParentPermissionId"] == sitems["PermissionId"])                     {                       ghtml += "<label class=‘checkbox‘><input type=‘checkbox‘ class=‘px‘ /><span class=‘lbl‘>" + ssitems["PermissionName"]+ "</span></label>";                     }                                                            })                    ghtml += "</p>";                    ghtml += "</li>";                }                                            })            ghtml += "</ul></div>";        }    });                        $("#premlist").html(ghtml);                   }})

3、最後要實現的效果如下：

Jquery 中each迴圈嵌套的使用樣本教程