关于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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 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.ini 中文版
2006/10/28 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python csv模块使用方法代码实例
2019/08/29 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
工程质量承诺书范文
2014/03/27 职场文书
合伙经营协议书范本
2014/04/18 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
AngularJS实现多级下拉框
2022/03/25 Javascript
Go归并排序算法的实现方法
2022/04/06 Golang