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 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
简单易用的计数器(数据库)
2006/10/09 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
js window.open弹出新的网页窗口
2014/01/16 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
Vuex之理解Store的用法
2017/04/19 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python difflib模块示例讲解
2017/09/13 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python中常见的异常总结
2018/02/20 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
士力架广告词
2014/03/20 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
学生会个人总结范文
2015/02/15 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
天那边观后感
2015/06/09 职场文书
高温慰问简报
2015/07/21 职场文书
教学副校长工作总结
2015/08/13 职场文书