关于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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
微信小程序之购物车功能
Sep 23 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
js实现图片上传即时显示效果
Sep 30 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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
js CSS操作方法集合
2008/10/31 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Python松散正则表达式用法分析
2016/04/29 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Python日志syslog使用原理详解
2020/02/18 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
学校课外活动总结
2014/05/08 职场文书
公司员工活动策划方案
2014/08/20 职场文书
机关党员公开承诺书
2014/08/30 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
教师节领导致辞
2015/07/29 职场文书
导游词之阆中古城
2019/12/23 职场文书