关于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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
vue Render中slots的使用的实例代码
Jul 19 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
介绍一下28个JS常用数组方法
May 06 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
用PHP4访问Oracle815
2006/10/09 PHP
PHP个人网站架设连环讲(一)
2006/10/09 PHP
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
set在python里的含义和用法
2019/06/24 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
几道PHP的面试题
2012/05/19 面试题
销售总监岗位职责
2014/01/04 职场文书
服务标兵事迹材料
2014/05/04 职场文书
2014年法务工作总结
2014/12/11 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
户外亲子活动总结
2015/05/08 职场文书
React配置子路由的实现
2021/06/03 Javascript
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android