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调用C#代码
Jan 17 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
javascript关于继承解析
May 10 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
asm.js使用示例代码
2013/11/28 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
JavaScript实现单例模式实例分享
2017/12/22 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
python批量提交沙箱问题实例
2014/10/08 Python
python概率计算器实例分析
2015/03/25 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python操作gitlab API过程解析
2019/12/27 Python
selenium如何定位span元素的实现
2021/01/13 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
小学作文评语大全
2014/04/21 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
开会通知
2015/04/20 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android