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 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
React更新渲染原理深入分析
Dec 24 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
python发布模块的步骤分享
2014/02/21 Python
python局域网ip扫描示例分享
2014/04/03 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python格式化输出%s和%d
2018/05/07 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
秋季红领巾广播稿
2014/01/27 职场文书
后备干部考察材料
2014/02/12 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
会议欢迎词范文
2015/01/27 职场文书
毕业论文致谢范文
2015/05/14 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
整理Python中常用的conda命令操作
2021/06/15 Python
Redis读写分离搭建的完整步骤
2021/09/14 Redis