【ZT】使用JQuery的each

本文介绍了jQuery中的each方法及其背后的JavaScript call方法。通过实例演示了如何使用each遍历数组和对象,展示了call方法如何改变函数调用上下文。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

介绍的详细,通熟易懂,举例很全面,初学可以借鉴着看!


源自:http://www.cnblogs.com/shengtianlong/archive/2010/08/11/1797631.html

在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。

其实jQuery里的each方法是通过js里的call方法来实现的。

下面简单介绍一下call方法。
call这个方法很奇妙,其实官方的说明是:“调用一个对象的一个方法,以另一个对象替换当前对象。”网上更多的解释是变换上下文环境,也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2,  , argN
可选项。将被传递方法参数序列。

说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

引用网上有一个很经典的例子

Js代码
function add(a,b)   
{   
    alert(a+b);   
}   
function sub(a,b)   
{   
    alert(a-b);   
}   
add.call(sub,3,1);  
 
用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。

具体call更深入的就不在这里提了。

下面提一下jQuery的each方法的几种常用的用法

Js代码
 var arr = [ "one", "two", "three", "four"];     
 $.each(arr, function(){     
    alert(this);     
 });     
//上面这个each输出的结果分别为:one,two,three,four    
    
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
$.each(arr1, function(i, item){     
   alert(item[0]);     
});     
//其实arr1为一个二维数组,item相当于取每一个一维数组,   
//item[0]相对于取每一个一维数组里的第一个值   
//所以上面这个each输出分别为:1   4   7     
  
  
var obj = { one:1, two:2, three:3, four:4};     
$.each(obj, function(key, val) {     
    alert(obj[key]);           
});   
//这个each就有更厉害了,能循环每一个属性     
//输出结果为:1   2  3  4 

var editor; var action = $.queryString("action"); var Pid = $.queryString("id"); $(function () { //设置返回列表的href, location_prior的href在后台打开当前记录信息时赋值。 // $("#location_back").attr("href", $("#location_prior").attr("href")); //用户获取出来,获取本部门用户。 //获取本部门的权限, $.ajax({ type: "POST", url: "../services/Dtry.ashx", headers: { "Authorization": "0772A4AA051DDEBB393DC164B19A32E57C4FEEAB27A77820" }, data: { action: "names", id: Pid }, success: function (msg) { $.each(msg.ds, function (index, item) { if (item.pid == -1) { $('#qx').append('<div><ul><li> <input id="a' + item.id + '" type="checkbox" name="select_checkbox" onclick="chk_changed();" value="' + item.id + '" /><a class="sz" href="javascript:onClick=show(' + item.id + ')">' + item.name + '</a></li></ul><ul id="' + item.id + '"> </ul></div>'); } else { $('#' + item.pid).append('<li class="sc"> <input id="a' + item.id + '" type="checkbox" name="select_checkbox" onclick="chk_changed(this);" value="' + item.id + '"/><a class="zt" href="javascript:onClick=show(' + item.id + ')">' + item.name + '<br/><ul class="cc" style="display:none" id="' + item.id + '"> </ul></li>') } }) $('#typeid').val(Pid); } }); $('#user_nickname').on('change', getQ); //初始化表单验证 $("#form1").initValidform(); $(".rule-single-checkbox").ruleSingleCheckbox(); $(".rule-single-select").ruleSingleSelect(); // var result = ""; }); function chk_changed(that) { var th = $(that); if (th.is(':checked')) { console.log('已选中'); } else { console.log('未选中'); } th.next('a').find('input').attr("checked", "true"); th.parent().parent().siblings().find('input').attr("checked", "true"); th.parent().parent().parent().siblings().attr("checked", "true"); var result = ""; $("input[name='select_checkbox']:checked").each(function () { result += $(this).val() + ','; }); if (result != "") { result = result.substring(0, result.lastIndexOf(',')); } $("#typename").val(result); } function show(d1) { if (document.getElementById(d1).style.display == 'none') { document.getElementById(d1).style.display = 'block'; //触动的层如果处于隐藏状态,即显示 } else { document.getElementById(d1).style.display = 'none'; //触动的层如果处于显示状态,即隐藏 } } var getQ = function () { var userid = $('#user_nickname').val(); if (userid == null || userid == undefined) { return false; } else { $.ajax({ type: "POST", url: "../services/Dtry.ashx", headers: { "Authorization": "0772A4AA051DDEBB393DC164B19A32E57C4FEEAB27A77820" }, data: { action: "getQ", id: userid }, success: function (msg) { $.each(msg.ds, function (index, item) { $('#a' + item.typeid).attr("checked", true); }) var result = ""; $("input[name='select_checkbox']:checked").each(function () { result += $(this).val() + ','; }); if (result != "") { result = result.substring(0, result.lastIndexOf(',')); } $("#typename").val(result); } }); } } 详细翻译代码内容
最新发布
03-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值