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> <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'> </span></label>  " +
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);
}
})jquery在线教程外包
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);
});
});
//会选或者取消功能结束