jquery中的each

$.each(Array, function(i, value) {

this;                                    //this指向当前元素

i;                                       //i表示Array当前下标

value;                                //value表示Array当前元素

});

each处理一维数组

var arr1 = [ "aaa", "bbb", "ccc" ];
  $.each(arr1, function(i,val){
      alert(i);
      alert(val);
  });   

alert(i)将输出      0,1,2
alert(val)将输出   aaa,bbb,ccc

each处理二维数组 

var arr2 = [[‘a‘, ‘aa‘, ‘aaa‘], [‘b‘, ‘bb‘, ‘bbb‘], [‘c‘, ‘cc‘, ‘ccc‘]]
  $.each(arr, function(i, item){
      alert(i);
      alert(item);
  });  

arr2为一个二维数组,item相当于取这二维数组中的每一个数组。
item[0]相对于取每一个一维数组里的第一个值
alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素
alert(item)将输出为  [‘a‘, ‘aa‘, ‘aaa‘],[‘b‘, ‘bb‘, ‘bbb‘],[‘c‘, ‘cc‘, ‘ccc‘]

处理二维数组

var arr = [[‘a‘, ‘aa‘, ‘aaa‘], [‘b‘, ‘bb‘, ‘bbb‘], [‘c‘, ‘cc‘, ‘ccc‘]]
   $.each(arr, function(i, item){
        $.each(item,function(j,val){
            alert(j);
            alert(val);
     });
});    

 alert(j)将输出为0,1,2,0,1,2,0,1,2

 alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc

each处理json数据

var obj = { one:1, two:2, three:3};
   each(obj, function(key, val) {
        alert(key);
        alert(val);
   });   

这里alert(key)将输出one two three
alert(val)将输出one,1,two,2,three,3
这边为何key不是数字而是属性呢,因为json格式内是一组无序的属性-值,既然无序,又何来数字呢。
而这个val等同于obj[key]

处理json数组

var comments=[

                              {name:‘xiaoming‘,msg:‘我是好孩子‘},

                              {name:‘xiaohong‘,msg:‘我喜欢过唱歌‘}                         

                              ];

$.each(comments,function(i,val){

                   alert(i);

        alert(val)

                   alert(val.name);

         })

输出结果为:0,[object,objec],xiaoming,1, [object,objec],xiaohong

ecah处理dom元素

$.each($("input:hidden"), function(i,val){ 

     alert(val);

     alert(i);

     alert(val.name);

     alert(val.value);  

 }); 

那么,alert(val)将输出[object HTMLInputElement],因为它是一个表单元素。  

alert(i)将输出为0,1,2,3

alert(val.name);将输出aaa,bbb,ccc,ddd,如果使用this.name将输出同样的结果

alert(val.value);  将输出111,222,333,444,如果使用this.value将输出同样的结果

$(selector).each(function(index,element))参数描述

function(index,element) 必需。为每个匹配元素规定运行的函数。
•index - 选择器的 index 位置
•element - 当前的元素(也可使用 "this" 选择器

<img/><img/>jQuery 代码:

$("img").each(function(i){
        this.src = "test" + i + ".jpg";
}); 

结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
$("button").click(function(){
      $("li").each(function(){
                alert($(this).text())
      });
});

怎么跳出each

返回 ‘false‘ 将停止循环 (就像在普通的循环中使用 ‘break‘)。
返回 ‘true‘ 跳至下一个循环(就像在普通的循环中使用‘continue‘)。
时间: 2024-10-12 03:38:56

jquery中的each的相关文章

网站开发div在Jquery中的鼠标事件失去焦点

网站div在Jquery中的鼠标事件失去焦点,今天在做网站开发的时候遇到了个问题,就是我在用Jquery做导航的时候,用到了Jquery的鼠标事件mouseout,但问题出来了,我有两个div,A的div包含了B的div,本来我是想当鼠标移出A的div的时候隐藏div,可是当我的鼠标移到B的div在移出的时候也会触发jquery的隐藏事件,这让人很头痛. 在网上搜了下,找到了解决的法子,就是直接把mouseout换成了mouseleave就可以了,具体的问题请大家参考Jquery的开发文档吧

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

JQuery中$.each 和$(selector).each()的区别详解

1.$(selector).each() jQuery 遍历 - each() 方法主要用于DOM遍历,each() 方法规定为每个匹配元素规定运行的函数. 语法: $(selector).each(function(index,element)) W3School上显示回调函数是必须的,index - 选择器的 index 位置,element - 当前的元素(也可使用 "this" 选择器). $().each,对于这个方法,在dom处理上面用的较多.如果页面有多个input标签类

jQuery中的事件

1:加载dom     在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中,     通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.     $(document).ready(function(){});缩写$(function(){}); 2: 事件绑定:对匹配的元素进行特定的事件绑定: bind() 3:合成事件:         hover():

jquery中的 $(function(){ .. }) 函数

2017-04-29 在讲解jquery中的 $(function(){ .. }) 函数之前,我们先简单了解下匿名函数.匿名函数的形式为:(function(){ ... }),又如 function(arg){ ... };定义了 一个参数为 arg 的匿名函数,然后使用 (function(arg){ ... })(param) 来调用这个函数,其中 param 是传入这个匿名函数的参数. 但需要主要匿名函数与jquery中的 $(function(){ ...}) 函数的区别:$(fun

jQuery中的选择器

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD

jQuery中$.ajax()详解(转)

JQuery中$.ajax()方法参数详解     url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有

jquery中html 与 text方法的区别

jquery中html 与 text方法的区别 24 May 2012/in 网站设计和开发 /by Bruce 接鉵jquery的时间并不长,以前都是用直接用js写的,现在发现在jquery这个框架用起来很方便,不但代码量少了,使用也比较简单,对于浏览器的兼容问题也不用担心,在使用的过程中也会遇到一些疑问,在html标签中附加子标签时所用的方法html()与text()的区别. 通常在用jquery写ajax时,都会用到html()这个方法,而不用text()这个方法,他们之间有什么区别呢?

jQuery中的事件冒泡

1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>事件冒泡</title> <script src="

jQuery中的bind() live() delegate()之间区别分析

jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click',function (){ alert('click'); }) 解析:这种方式最简单,jq扫描文档找出所有的a,让将函数绑定到每个元素的click事件上 2.live方式 $('a').live('click',function (){ alert('click'); }) 解析:jq将函数绑定到$