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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
angular多语言配置详解
May 16 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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
PHP 解决session死锁的方法
2013/06/20 PHP
php数组合并的二种方法
2014/03/21 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
超级强大的表单验证
2006/06/26 Javascript
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
Python使用redis pool的一种单例实现方式
2016/04/16 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python实现微信机器人的方法
2019/09/06 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
pytorch标签转onehot形式实例
2020/01/02 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
PHP经典面试题
2016/09/03 面试题
机电一体化自荐信
2013/12/10 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
CAD实训总结范文
2015/08/03 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
netty 实现tomcat的示例代码
2022/06/05 Servers