jQuery中each方法的使用详解


Posted in jQuery onMarch 18, 2018

概述:

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

返回 false 可用于及早停止循环,相当于break。

返回 true 可以结束本次循环,相当于continue。

语法:

$(selector).each(function(index,element){ })

index - 选择器的 index 位置


element - 当前的元素(也可使用 "this" 选择器)

$(selector).each(function(){ })

$.each(array,function(Key,Value){ })

1.遍历js数组

$(function(){
 var array=["aaa","bbb","ccc"];
 $.each(array,function(i,j){
  alert(i+":"+j);//i表示索引,j代表值
 });
})

2.遍历Object对象

var obj = new Object();
obj.name="zs";
$.each(obj, function(name, value) {
alert(this);  //this指向当前属性的值,等价于value

alert(name);  //name表示Object当前属性的名称

alert(value);  //value表示Object当前属性的值
});

3.遍历JSON对象

var json ={"name":"zhangSan","role":"student"};
$.each(json,function(key,value){
 alert(key+":"+value);
});

4.遍历由多个JSON对象组成的数组

var json =[{"name":"Amy","role":"student"},{"name":"Tom","role":"student"}];
$.each(json, function(index, value) {
  alert("index="+index+"\n" +"name:"+value.name+"\n"+"role:"+value.role+"\n");
});

 5.遍历jQuery对象 

<head>
  <meta charset="utf-8" />
  <title>遍历jQuery对象</title>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
   $(function(){
    $("input[type='button']").bind("click",function(){
     $("li").each(function(){
      alert($(this).text())
      });
    });
   });
  </script>
 </head>
 <body>
  <input type="button" value="触发事件"/>
  <ul>
   <li>first</li>
   <li>second</li>
  </ul>
 </body>

总结

以上所述是小编给大家介绍的jQuery中each方法的使用详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 #jQuery
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
You might like
PHP 替换模板变量实现步骤
2009/08/24 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
JavaScript模拟push
2016/03/06 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
js实现本地图片文件拖拽效果
2017/07/18 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
python编程线性回归代码示例
2017/12/07 Python
Python登录注册验证功能实现
2018/06/18 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
python中PyQuery库用法分享
2021/01/15 Python
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
超市店庆活动方案
2014/08/31 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
个人工作总结范文2014
2014/11/07 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
用javascript制作qq注册动态页面
2021/04/14 Javascript
js之ajax文件上传
2021/05/13 Javascript