jQuery中each()方法用法实例


Posted in Javascript onDecember 27, 2014

本文实例讲述了jQuery中each()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数。

当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的。通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成。
each()方法不同于jQuery.each()方法 。each()方法只能够遍历JQuery对象,而jQuery.each()方法可以遍历任何对象。
语法结构:

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

参数列表:

参数 描述
function(index,element) 每个匹配元素定义运行的方法。 index - 可选。当前上下文元素在匹配元素集合中的索引。 element -可选。当前的元素(也可使用 "this" 选择器)。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>each()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#btn").click(function(){

  $("li").each(function(index,element){

    alert($(element).text())

  })

})

})

</script>

</head>

<body>

<ul>

  <li>后台专区</li>

  <li>前台专区</li>

  <li>数据库专区</li>

  <li>站长专区</li>

</ul>

<button id="btn">点击查看效果</button>

</body>

</html>

以上代码能够便利li元素集合中的每一个元素,然后返回li元素中的文本。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
jQuery.holdReady()方法用法实例
Dec 27 #Javascript
jQuery中的jQuery()方法用法分析
Dec 27 #Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 #Javascript
基于jquery实现发送文章到手机的代码
Dec 26 #Javascript
jQuery中ajax的post()方法用法实例
Dec 26 #Javascript
jQuery中ajax的get()方法用法实例
Dec 26 #Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 #Javascript
You might like
PHP小教程之实现双向链表
2014/06/12 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
php中序列化与反序列化详解
2017/02/13 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
详解Django通用视图中的函数包装
2015/07/21 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
什么是组件架构
2016/05/15 面试题
公司员工的自我评价范例
2013/11/01 职场文书
房地产销售员的自我评价分享
2013/12/04 职场文书
业务员岗位职责范本
2013/12/15 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
小学亲子活动总结
2014/07/01 职场文书
青年标兵事迹材料
2014/08/16 职场文书
治庸问责心得体会
2014/09/12 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
高温慰问简报
2015/07/21 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server