Jquery中each的使用总结

转载 2016年08月30日 16:13:23

一、each的三种使用方法

1、选择器+遍历

$('div').each(function (i){

   i就是索引值

   this 表示获取遍历每一个dom对象

});

2、选择器+遍历

$('div').each(function (index,domEle){

   index就是索引值

  domEle 表示获取遍历每一个dom对象

});

3、更适用的遍历方法

1)先获取某个集合对象

2)遍历集合对象的每一个元素

var d=$("div");

$.each(d,function (index,domEle){

  d是要遍历的集合

  index就是索引值

  domEle 表示获取遍历每一个dom

});

二、jquery的$().each,$.each的区别

在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。

$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:

$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码

}

回调函数是可以传递参数,i就为遍历的索引。

对于遍历一个数组,用$.each()来处理,简直爽到了极点。例如:

$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n)
{
alert(“索引:”+i,”对应值为:”+n.name);
});

参数i为遍历索引值,n为当前的遍历对象.

 

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});
输出:one   two  three  four   five
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
输出:1   4   7
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
输出:1   2  3  4  5


在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



相关文章推荐

jQuery-each用法全面总结

  • 2016年07月29日 15:39
  • 16KB
  • 下载

jquery遍历json与数组方法总结each()

在jquery中遍历数组或json数组我们使用最多的方法是each这个函数了或使用foreach,for也是可以实现的,下面我来给大家详细介绍jquery遍历json与数组实现。 代码如下复制代码 先...

菜鸟学习笔记——jQuery中.css(),.each(),.append(),.html()方法总结

1、$(selector).css() 1)$(selector).css(name),返回css的属性值。如:$("p").css("color"),返回p的color值; 2)$(select...

Jquery中find与each方法使用详解

本文实例讲述了jQuery中find与each方法用法。分享给大家供大家参考。具体如下: 一、find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素。 ...

jquery的each()详细使用方法

jquery的each()详细介绍 each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, J...

JQuery中each()的使用方法说明

转载:http://www.jb51.net/article/24581.htm 对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQ...

jquery $.each() 使用小探

jquery each想必大家对此并不陌生吧,它的使用范围还是比较广泛的,下面与大家分享个示例来介绍jquery each的使用方法。 jquery each使用-www.jbxue.com ...

使用JQuery的each

源地址:http://www.cnblogs.com/shengtianlong/archive/2010/08/11/1797631.html 在jQuery里有一个each方法,用起来非常的爽,...

jquery中each的使用方法

1、选择器+遍历 $('div').each(function (i){    i就是索引值    this 表示获取遍历每一个dom对象 }); 2、选择器+遍...
  • ljl_com
  • ljl_com
  • 2017年05月28日 17:09
  • 260

jquery 里的each使用方法详解

jquery 里的each使用方法详解 有个同事问我each使用方法,我把我知道的用法告诉他.他却说不是这样的......如是在网上小逛了一下,果然用法有很多.下面总结下大慨的使用方法. each...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery中each的使用总结
举报原因:
原因补充:

(最多只允许输入30个字)