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学习笔记(二) js对象
Oct 25 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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 UTF8编码内的繁简转换类
2009/07/20 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
复习Python中的字符串知识点
2015/04/14 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python抓取网页中链接的静态图片
2018/01/29 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
Django之腾讯云短信的实现
2020/06/12 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
经典促销广告词大全
2014/03/19 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
简易离婚协议书范本
2014/10/24 职场文书
文艺演出主持词
2015/07/01 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python