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+CSS控制打印格式示例介绍
Jan 07 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 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
德劲1103的维修打理经验
2021/03/02 无线电
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
python 实现屏幕录制示例
2019/12/23 Python
opencv python如何实现图像二值化
2020/02/03 Python
通过python检测字符串的字母
2020/02/18 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
中英文自我评价常用句型
2013/12/19 职场文书
管理专员自荐信
2014/01/26 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
新年团拜会主持词
2014/04/02 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
Python采集壁纸并实现炫轮播
2022/04/30 Python