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性能最佳实践的讨论,与求教
Mar 30 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
js加减乘除丢失精度问题解决方法
May 16 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
Angular8基础应用之表单及其验证
Aug 11 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
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
经理管理专业自荐信范文
2013/12/31 职场文书
环保倡议书300字
2014/05/15 职场文书
根叔历年演讲稿
2014/05/20 职场文书
医院标语大全
2014/06/23 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
通知范文怎么写
2015/04/16 职场文书
交通事故被告答辩状
2015/05/22 职场文书