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实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
js实现碰撞检测
Jan 29 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实现的AES加密类定义与用法示例
2018/01/29 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python操作xml文件详细介绍
2014/06/09 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
wxPython的安装与使用教程
2018/08/31 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
年度献血先进个人事迹材料
2014/02/14 职场文书
授权委托书样本
2014/04/03 职场文书
校企合作协议书
2014/04/16 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
消防演习通知
2015/04/25 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
金榜题名主持词
2015/07/02 职场文书
外科护士长工作总结
2015/08/12 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫