jquery操作对象数组元素方法详解


Posted in Javascript onNovember 26, 2014

代码如下:

 <div id="div1">

     <span>a</span>

     <span>b</span>

     <span>c</span>

 </div>

1.错误方式:不能用[]方式取jquery对象数组,如下:

 $(function() {

     var div_span = $("#div1 span");

     for( var i = 0; i < div_span.length; i++ ) {

         div_span.[i].html(i);

     }

 });

这样无效.

2.可以用jquery的eq()方法来选择:

 for( var i = 0; i < div_span.length; i++ ) {

     div_span.eq(i).html(i);

 }

3.可以用each()方法来遍历:

 $(function() {

     var div_span = $("#div1 span");

     var i = 0;

     div_span.each( function(){

         $(this).html(i);

         i++;

     });

 });

each()遍历的时候,如果用$(this)得到的是jquery对象,如果直接用this,得到的是DOM对象

4.纯js代码获取的DOM对象数组,可以用[]的方式获取数组元素

后面3种是正确的方法,第一种是错误的,把他放在第一个,是因为要强调下,以后不能再犯同样的错误了,小伙伴们可要看仔细哈。

Javascript 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
js实现iframe动态调整高度的代码
Jan 06 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 #Javascript
JavaScript定义类和对象的方法
Nov 26 #Javascript
node.js操作mongoDB数据库示例分享
Nov 26 #Javascript
教你如何使用node.js制作代理服务器
Nov 26 #Javascript
浅析node.js中close事件
Nov 26 #Javascript
node.js超时timeout详解
Nov 26 #Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 #Javascript
You might like
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Python函数返回值实例分析
2015/06/08 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Python File readlines() 使用方法
2018/03/19 Python
详解python中的装饰器
2018/07/10 Python
python装饰器的特性原理详解
2019/12/25 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
新员工欢迎词
2014/01/12 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
英文升职感谢信
2015/01/23 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers