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 06 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery实现雪花飘落效果
Aug 02 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自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
普天C++笔试题
2016/03/20 面试题
个人查摆剖析材料
2014/02/04 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
雨中的树观后感
2015/06/03 职场文书
护士业务学习心得体会
2016/01/25 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS