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 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
javascript 节点遍历函数
Mar 28 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 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
?繁体转换的class
2006/10/09 PHP
php的memcached客户端memcached
2011/06/14 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
两款万能的php分页类
2015/11/12 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python_mask_array的用法
2020/02/18 Python
python实现126邮箱发送邮件
2020/05/20 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
自荐信模版
2013/10/24 职场文书
学校门卫工作职责
2013/12/07 职场文书
大学生实训报告总结
2014/11/05 职场文书
2015高考寄语集锦
2015/02/27 职场文书
计算机专业自荐信
2015/03/05 职场文书
校车安全管理责任书
2015/05/11 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL