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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 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
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
动态控制Table的js代码
2007/03/07 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
提高python代码运行效率的一些建议
2020/09/29 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
2013年员工自我评价范文
2013/12/27 职场文书
运动会广播稿200字
2014/01/15 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
投资协议书范本
2014/04/21 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
MySQL连接控制插件介绍
2021/09/25 MySQL
浅谈Node的内存泄露问题
2022/05/06 NodeJs