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广告代码
May 30 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
JS canvas实现画板和签字板功能
Feb 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和ACCESS写聊天室(五)
2006/10/09 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
关于尾递归的使用详解
2013/05/02 PHP
常用PHP框架功能对照表
2014/10/23 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
六行python代码的爱心曲线详解
2019/05/17 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
运动会广播稿50字
2015/08/19 职场文书
初三语文教学反思
2016/03/03 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python