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中的toLocaleDateString()方法使用简介
Jun 12 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
js时间控件只显示年月
Jan 08 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
win与linux系统中python requests 安装
2016/12/04 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
基于python实现学生信息管理系统
2019/11/22 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
在C#中如何实现多态
2014/07/02 面试题
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
旅游专业职业生涯规划范文
2014/01/13 职场文书
大学自我评价
2014/02/12 职场文书
离婚协议书格式范本
2016/03/18 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
MySQL三种方式实现递归查询
2022/04/18 MySQL