jquery对象中each方法使用实例详解-js教程-PHP中文网

jquery对象中each方法使用实例详解

伊谢尔伦

发布： 2017-06-19 15:43:43

原创

1501人浏览过

在jquery对象中只是把each方法简单的进行了委托：把jquery对象作为第一个参数传递给jquery的each方法。换句话说：jquery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用each()函数是基本上所有的框架都提供了的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理。jquery和jquery对象都实现了该方法，对于jquery对象，只是把each方法简单的进行了委托：把jquery对象作为第一个参数传递给jquery的each方法.换句话说：jquery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jquery对象提供的each方法则是对jquery内部的子元素进行逐个调用。

each函数根据参数的类型实现的效果不完全一致：

1、遍历对象(有附加参数)

$.each(Object, function(p1, p2) {    
   this;       //这里的this指向每次遍历中Object的当前属性值
  p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

登录后复制

2、遍历数组(有附件参数)

代码如下:

$.each(Array, function(p1, p2){    
  this;       //这里的this指向每次遍历中Array的当前元素
  p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

登录后复制

3、遍历对象(没有附加参数)

代码如下:

$.each(Object, function(name, value) {     
       this;      //this指向当前属性的值
     name;      //name表示Object当前属性的名称
     value;     //value表示Object当前属性的值});

登录后复制

4、遍历数组(没有附加参数)

代码如下:

$.each(Array, function(i, value) {     
      this;      //this指向当前元素
     i;         //i表示Array当前下标
     value;     //value表示Array当前元素});

登录后复制

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

each(callback)
以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整形）。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
而后面的callback 则是回调函数，指示遍历元素的时候应该赋予的操作。先看下面的一个简单的例子：
迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

508

查看详情

<img></img/>
$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
}); 
结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

登录后复制

当然，在遍历元素的时候，jquery是允许自定义跳出的，请看示例代码：你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:

代码如下:

<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>

登录后复制

jQuery 代码:

代码如下:

$("button").click(function(){
    $("div").each(function(index, domEle){
        $(domEle).css("backgroundColor", "wheat");
        if ($(this).is("#stop")) {
            $("span").text("在div块为#" + index + "的地方停止。");
            return false;
        }
    })
}

登录后复制

each() 方法规定为每个匹配元素规定运行的函数。

提示：返回 false 可用于及早停止循环。
语法
$(selector).each(function(index,element))参数描述
function(index,element) 必需。为每个匹配元素规定运行的函数。
•index - 选择器的 index 位置
•element - 当前的元素（也可使用 "this" 选择器

obj 对象不是数组
该方法同1的最大区别是：fn方法会被逐次不考虑返回值的进行进行。换句话说，obj对象的所有属性都会被fn方法进行调用，即使fn函数返回false。调用传入的参数同1类似。

jQuery.each = function(obj, fn, args){
    if (args) {
        if (obj.length == undefined) {
            for (var i in obj)
                fn.apply(obj, args);
        } else {
            for (var i = 0, ol = obj.length; i < ol; i++) {
                if (fn.apply(obj, args) === false)
                    break;
            }
        }
    } else {
        if (obj.length == undefined) {
            for (var i in obj)
                fn.call(obj, i, obj);
        } else {
            for (var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val, i, val) !== false; val = obj[++i]) {
            }
        }
    }
    return obj;
}

登录后复制

需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式，这意味着，在你自己的fn的实现中，可以直接采用this指针引用数组或是对象的子元素。

以上就是jquery对象中each方法使用实例详解的详细内容，更多请关注php中文网其它相关文章！