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 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
vuejs如何配置less
Apr 25 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
介绍几个array库的新函数 php
2006/12/29 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
vue cli 全面解析
2018/02/28 Javascript
js+css实现打字效果
2020/06/24 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python实现批量图片格式转换
2020/06/16 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python生成随机红包的实例写法
2019/09/02 Python
Python列表元素常见操作简单示例
2019/10/25 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
Python实现自动签到脚本功能
2020/08/20 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
化学教师教学反思
2014/01/17 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
三峡导游词
2015/01/31 职场文书
爱的教育读书笔记
2015/06/26 职场文书
六年级作文之自救
2019/12/19 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
MySQL里面的子查询的基本使用
2021/08/02 MySQL
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python