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的history历史记录插件
Dec 11 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
js实现省市级联效果分享
Aug 10 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
layUI实现列表查询功能
Jul 27 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
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正则走开
2008/03/15 PHP
php实现分页工具类分享
2014/01/09 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
Jquery 自定义动画概述及示例
2013/03/29 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
r.js来合并压缩css文件的示例
2018/04/26 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
python 多个参数不为空校验方法
2019/02/14 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
深入了解python列表(LIST)
2020/06/08 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
C#可否对内存进行直接的操作
2015/02/26 面试题
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
求职自荐信的格式
2014/04/07 职场文书
ktv筹备计划书
2014/05/03 职场文书
访谈节目策划方案
2014/05/15 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
买房子个人收入证明
2014/10/12 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python