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动态调整iframe高度的代码
Apr 10 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
vuejs如何配置less
Apr 25 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
Javascript开发包大全整理
2006/12/22 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python 错误和异常代码详解
2018/01/29 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
社团活动总结
2014/04/28 职场文书
接待员岗位职责范本
2015/04/15 职场文书
单身证明格式样本
2015/06/15 职场文书
教师远程研修感悟
2015/11/18 职场文书