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 全局AJAX事件使用代码
Nov 05 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
使用vue实现各类弹出框组件
Jul 03 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源码之 ext/mysql扩展部分
2009/07/17 PHP
Yii配置文件用法详解
2014/12/04 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
动态加载iframe
2006/06/16 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
Python中用于计算对数的log()方法
2015/05/15 Python
Python使用剪切板的方法
2017/06/06 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python 整数越界问题详解
2019/06/27 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
幼儿园中班区域活动总结
2014/07/09 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技