关于jQuery中的end()使用方法


Posted in Javascript onJuly 10, 2011

在官方的API上是这样描述end()方法的:“回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。”;
看样子好像是找到最后一次操作的元素的上一元素,在如下的例子中:
html代码:

<div>测试内容1</div> 
<div>测试内容2</div>

jQuery代码:
$('<p>新增内容</p>').appendTo('div').addClass('c1').end().addClass('c2');

得到的结果是:
<div>测试内容1 <p class="c1 c2">新增内容</p></div> 
<div>测试内容2 <p class="c1">新增内容</p></div>

这里我就有一点不太明白了,怎么只有第一个<p>标签有两个样式,end()方法后返回的是什么,在火狐里添加了监控,得到如下结果:
1.$('<p>新增内容</p>').appendTo('div')返回的是:[p,p]对象数组,即新增后的两个p标签;
2.$('<p>新增内容</p>').appendTo('div').addClass('c1')返回的是:[p.c1,p.c1]对象数组,即添加了c1类样式后的p对象数组;
3.$('<p>新增内容</p>').appendTo('div').addClass('c1').end()返回的是[p.c1],是第1个<div>中的<p>,在2操作中,最后“破坏”的是第2个<div>中的 <p>,所以他的前一次操作的对象是第1个<div>中的<p>,返回的就是它;
4.$('<p>新增内容</p>').appendTo('div').addClass('c1').end().addClass('c2')返回的仍然是第1个<div>中的<p>;
现在算是有点明白了,关键是要搞清楚最后一次操作的元素的上一元素是什么。
Javascript 相关文章推荐
js中的前绑定和后绑定详解
Aug 01 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 #Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 #Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 #Javascript
jquery 选项卡效果 新手代码
Jul 08 #Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 #Javascript
jquery调用wcf并展示出数据的方法
Jul 07 #Javascript
基于json的jquery地区联动效果代码
Jul 06 #Javascript
You might like
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JQuery live函数
2010/12/24 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
对python while循环和双重循环的实例详解
2019/08/23 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
python如何查看安装了的模块
2020/06/23 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
检察官就职演讲稿
2014/01/13 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
如何写辞职信
2015/05/13 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
办公室管理规章制度
2015/08/04 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python