Jquery 中each循环嵌套的使用示例教程

简介: 1、从MVC返回的Json数据如下: 2、下面是客户端实现的示例: $.post("/admin/GetPermissionsForRole", function (data,status) { if (status == "success") { var ghtml = ""; $.

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、最后要实现的效果如下:

//权限"全选或者取消"功能代码,此代码必须要放在append()的后面,不然不起作用
var xsChk = 'px';//定义的样式
var xsChkAll = "input[type='checkbox'][class='" + xsChk + "'][name]";//所有定义此样式的checkbox
$(xsChkAll).each(function () {
    var name = $(this).attr("name");
    name = "input[type='checkbox'][class!='" + xsChk + "'][name='" + name + "']";//此全选框下面的子checkbox
    $(this).on('click', function () {
        $(name).attr("checked", $(this)[0].checked);
    })
    var xschk = $(this);
    $(name).on('click', function () {
        var IAll = $(name).length; //此子项目下所有checkbox的个数
        var IChk = $(name + ":checked").length; //此子项目下所有勾选checkbox的个数
        var isAllChecked = true; //是否是全选
        if (IAll != IChk) {
            isAllChecked = false;
        }
        $(xschk).attr("checked", isAllChecked);
    });
});
//会选或者取消功能结束

 

学习交流群:364976091
相关文章
|
7月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
63 1
|
7月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
86 0
|
JavaScript 前端开发
jQuery each() 便利
jQuery each() 便利
43 0
|
6月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
70 1
|
7月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
7月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
JavaScript 前端开发
Jquery的$.each()如何使用
Jquery的$.each()如何使用
86 0
|
JSON JavaScript 前端开发
JQuery数组遍历 - $.each(),$().each()和forEach()
JQuery数组遍历 - $.each(),$().each()和forEach()
180 0
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
49 0
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
70 0