关于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控制css中的float的代码
Aug 16 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
用console.table()调试javascript
Sep 04 Javascript
JS之相等操作符详解
Sep 13 Javascript
canvas实现图像放大镜
Feb 06 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
动感效果的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
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
javascript中Object使用详解
2015/01/26 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
优秀志愿者事迹材料
2014/02/03 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
2014年幼师工作总结
2014/11/22 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
python小程序之飘落的银杏
2021/04/17 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android