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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
firefo xml 读写实现js代码
Jun 11 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 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 similar_text 字符串的相似性比较函数
2010/05/26 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
php实现可逆加密的方法
2015/08/11 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
javascript json 新手入门文档
2009/12/03 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
python实现各种插值法(数值分析)
2019/07/30 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
Python基于locals返回作用域字典
2020/10/17 Python
微笑服务演讲稿
2014/05/13 职场文书
保护黄河倡议书
2014/05/16 职场文书
走进敬老院活动总结
2014/07/10 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
环保建议书作文500字
2015/09/14 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang