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比较文档位置
Apr 08 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 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
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
一篇文章快速了解Python的GIL
2018/01/12 Python
浅述python中深浅拷贝原理
2018/09/18 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
基于python代码批量处理图片resize
2020/06/04 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
任意存:BOXFUL
2018/05/21 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
自我评价的写作规则
2014/01/06 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
保密协议书范本
2014/04/22 职场文书
党建目标管理责任书
2014/07/25 职场文书
幼儿教师个人总结
2015/02/05 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
python缺失值填充方法示例代码
2022/12/24 Python