关于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 DOM操作 基于命令改变页面
May 06 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
Javascript闭包实例详解
Nov 29 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php生成shtml类用法实例
2014/12/09 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
php设计模式之单例模式代码
2016/06/11 PHP
浅析创建javascript对象的方法
2016/05/13 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
使用python实现knn算法
2017/12/20 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
华为C++笔试题
2014/08/05 面试题
网络工程师的自我评价
2013/10/02 职场文书
班级活动策划书
2014/02/06 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
党员评议个人总结
2014/10/20 职场文书
雨花台导游词
2015/02/06 职场文书
店长岗位职责
2015/02/11 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
实施意见格式范本
2015/06/05 职场文书
早安问候语大全
2015/11/10 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript