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 相关文章推荐
js中call与apply的用法小结
Dec 28 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
vue.js实现回到顶部动画效果
Jul 31 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP 中的批处理的实现
2007/06/14 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
PHP图片加水印实现方法
2016/05/06 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript call和apply方法
2008/11/24 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
Python中的pack和unpack的使用
2018/03/12 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Python简单I/O操作示例
2019/03/18 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Python实现微信好友的数据分析
2019/12/16 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
行政经理的岗位职责
2013/11/23 职场文书
音乐教师求职信
2014/06/28 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python