jquery each用法和定义

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

提示:返回 false 可用于及早停止循环。

语法

$(selector).each(function(index,element))参数 描述
function(index,element) 必需。为每个匹配元素规定运行的函数。

•index - 选择器的 index 位置
•element - 当前的元素(也可使用 "this" 选择器

实例
输出每个 li 元素的文本:

 代码如下 复制代码

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

实例

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指针引用数组或是对象的子元素。

那怎么跳出each呢

jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后,要跳出这个循环。
javascript的跳出循环一般用break.
同事遇到这个问题,下意识 的用了break,想跳出这个循环。结果报错

SyntaxError: unlabeled break must be inside loop or switch

经查,应该用一个

在回调函数里return false即可,大多数jq的方法都是如此的

===================================

 代码如下 复制代码

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

时间: 2024-09-27 23:20:06

jquery each用法和定义的相关文章

图解JQUERY尺寸及位置定义

最近在学习JQUERY的一些应用,接触到了JQUERY对于元素尺寸及位置定义,还有就是配合浏览器尺 寸及状态的计算所做出的一些动画特效.其实像这类JQUERY应用无外乎涉及这些属性的调用:innerHeight().innerWidth(). outerHeight().outerHeight(true).outerHeight(false).outerWidth(true). outerWidth(false).position().offset().scrollTop().scrollLef

jQuery回调函数的定义及用法实例_jquery

本文实例讲述了jQuery回调函数的定义及用法.分享给大家供大家参考.具体分析如下: jQuery代码中对回调函数有着广泛的应用,对其有精准的理解是非常有必要的,下面就通过实例对此方法进行简单的介绍. 代码实例如下: 利用回调函数,当div全部隐藏之后弹出一个提示框. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="a

jQuery的:parent选择器定义和用法_jquery

:parent选择器的定义和用法: 此选择器匹配含有子元素或者文本的元素. 注意:空格也算是含有的元素. 语法结构: $(":parent") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: $("div:parent").animate({width:"300px"}) 以上代码能够将含有文本或者元素的div的宽度设置为300px. 如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":p

js split 的用法和定义 js split分割字符串成数组的实例代码_基础知识

关于js split的用法其它也不多说什么,下面直接举例给大家看看 复制代码 代码如下: <script language="javascript"> str="2,2,3,5,6,6"; //这是一字符串 var strs= new Array(); //定义一数组 strs=str.split(","); //字符分割 for (i=0;i<strs.length ;i++ ) { document.write(strs[i

jquery load()用法和ready()用法及区别

$(document).ready(fn)与$(window).load(fn),二者的差别在于:$(document).ready(fn)发生在"网页本身的html"载入后就触发,$(window).load(fn)则会等到"网页html标签中引用的图档.内嵌物件(如flash).iframe"等拉哩拉杂的东西都载入后才会触发. 一般来说,等网页全部元素都载入才执行程式时机有点晚,因为在此之前,使用者已经可以点选操作网页,跳脱我们程式的掌控范围.因此,我们几乎都是

Jquery教程:JQUERY对于元素尺寸及位置定义

文章简介:最近小剧在学习JQUERY的一些应用,接触到了JQUERY对于元素尺寸及位置定义,还有就是配合浏览器尺寸及状态的计算所做出的一些动画特效.其实像这类JQUERY应用无外乎涉及这些属性的调用:innerHeight().innerWidth().outerHeight().outerHeight(true).outerHeight(fal 最近小剧在学习JQUERY的一些应用,接触到了JQUERY对于元素尺寸及位置定义,还有就是配合浏览器尺寸及状态的计算所做出的一些动画特效.其实像这类J

不定义JQuery插件,不要说会JQuery

一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 二:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的

JavaScript jQuery 中定义数组与操作及jquery数组操作_jquery

首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象 Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数组的功能 1.1 定义数组 声明有10个元素的数组 复制代码 代码如下: var a = new Array(10); 此时为a已经开辟了内存空间,包含10个元素,用数组名称加 [下标] 来调用,例如

jQuery定义插件的方法_jquery

有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object)  例子: /* $.e