jQuery中each遍历的三种方法实例分析


Posted in jQuery onSeptember 07, 2018

本文实例讲述了jQuery中each遍历的三种方法。分享给大家供大家参考,具体如下:

1、选择器+遍历

$('div').each(function (i){
  //i就是索引值
  //this 表示获取遍历每一个dom对象
});

2、选择器+遍历

$('div').each(function (index,domEle){
  //index就是索引值
  //domEle 表示获取遍历每一个dom对象
});

3、更适用的遍历方法

1)先获取某个集合对象

2)遍历集合对象的每一个元素

var d=$("div");
$.each(d,function (index,domEle){
 //d是要遍历的集合
 //index就是索引值
 //domEle 表示获取遍历每一个dom对
});

案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com 属性选择器学习</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
//使用jquery加载事件
$(document).ready(function (){
//<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可见的文本域的值 $('input[type=text]:enabled')" />
$("#btn0").click(function (){
//当点击按钮后,设置id=two的div的背景颜色是绿色
$("input[type=text]:enabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值 $('input[type=text]:disabled')" />
$("#btn1").click(function (){
//当点击按钮后,设置id=two的div的背景颜色是绿色
$("input[type=text]:disabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" />
$("#btn2").click(function (){
//当点击按钮后,设置id=two的div的背景颜色是绿色
alert($("input[type=checkbox]:checked").length);
/*
$("input[type=checkbox]:checked").each(function(index,domEle){
//alert(domEle.value);
//alert(this.value);
//alert($(this).val());
});
*/
});
//<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容 $('select option:selected')" />
$("#btn3").click(function (){
//当点击按钮后,设置id=two的div的背景颜色是绿色
$("select option:selected").each(function(index,domEle){
//domEle.value="xxxxx";
alert($(domEle).text());
});
});
});
</script>
</head>
<body>
<form method="post" action="">
<input type="text" value="可见元素1" />
<input type="text" value="不可见元素1" disabled="disabled" />
<input type="text" value="可见元素2" />
<input type="text" value="不可见元素2" disabled="disabled" /><br>
<input type="checkbox" value="美女" />美女
<input type="checkbox" value="美男" />美男
<input type="checkbox" value="大爷" />大爷
<input type="checkbox" value="大妈" />大妈
<br>
<input type="radio" value="男" />男
<input type="radio" value="女" />女
<br>
<select id="zhiwei" size="5" multiple="multiple">
  <option>PHP开发工程师</option>
  <option>数据库管理员</option>
  <option>系统分析师</option>
  <option>保安</option>
</select>
<select id="xueli">
  <option>大专</option>
  <option>中专</option>
  <option>小学</option>
</select>
</form>
<div style="clear:both;">
<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可修改的文本域的值 $('input[type=text]:enabled')" /><br>
<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值 $('input[type=text]:disabled')" /><br>
<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" /><br>
<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容 $('select option:selected')" /><br>
</div>
</body>
</html>

运行结果:

jQuery中each遍历的三种方法实例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 #jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
jQuery滑动效果实现方法分析
Sep 05 #jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
You might like
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
详解vue 组件注册
2020/11/20 Vue.js
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
倡议书怎么写?
2019/04/11 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js