关于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 字符串乘法
Aug 20 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 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 array 的加法操作代码
2010/07/24 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
python3设计模式之简单工厂模式
2017/10/17 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python中if嵌套命令实例讲解
2021/02/25 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
爱我中华演讲稿
2014/05/20 职场文书
法人委托书的范本格式
2014/09/11 职场文书
先进班组材料范文
2014/12/25 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL