关于jQuery中的end()使用方法
更新时间：2011年07月10日 00:05:47 作者：
最近在学习jQuery方面的知识，学习中遇到一定的困难，一些知识不得不查看官方的文档，在用到end()方法时，被一个小例子搞得有点晕。
在官方的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>;
现在算是有点明白了，关键是要搞清楚最后一次操作的元素的上一元素是什么。
看样子好像是找到最后一次操作的元素的上一元素，在如下的例子中：
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>;
现在算是有点明白了，关键是要搞清楚最后一次操作的元素的上一元素是什么。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了jQuery Layer弹出层传值到父页面的实现代码,需要的朋友可以参考下2017-08-08
看了《javascript高级程序设计》里面有个表格排序的例子；觉得很有意思，所以自己用jquery的基本库做了一个，里面的概念基本和书里面的差不多2010-09-09
只需引入jqery.js,不需要引入插件，利用jquery定义的一些基本方法，就能实现诸如隐藏，显示，淡入，淡出，半透明等2010-12-12
图片滚动效果相信大家都使用过，看上去很简单的一个效果，如果想熟练的掌握必须知道jquery、IIFE、setInterval等基础以及$.fn用法，下面这篇文章主要介绍了关于jquery中$.fn和图片滚动效果制作的必备知识，需要的朋友可以参考下。2017-04-04
jquery插件丰富，很多都是很好用的，最近学习了一下如何制作jquery插件，发现jquery插件制作其实很简单，这里介绍一下。2010-06-06
Easyui的panel面板，在panel的面板中动态添加Linkbuton按钮的编辑方法，下面把实现思路及代码记录到脚本之家平台，供大家参考2017-08-08
这篇文章主要为大家详细介绍了jquery实现简单自动轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。这篇文章主要介绍了DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）,需要的朋友可以参考下2016-11-11
本篇文章是对用jquery实现简单的ajax的实现方法进行了详细的分析介绍，需要的朋友参考下2013-07-07
这篇文章主要介绍了jquery利用拖拽方式在图片上添加热链接的方法，其实是用jquery写了个可以在图片添加锚点的功能，感兴趣的小伙伴们可以参考一下2015-11-11
最新评论