加载中...

end()

概述    .end()

返回值：jQuery

描述： 终止在当前链的最新过滤操作，并返回匹配的元素的以前状态。

  • V : 1.0.end()

    • 这个方法不接受任何参数。

大多数 jQueryDOM遍历 方法来操作 jQuery 对象实例，并创建一个新的对象，匹配一个不同的 DOM 元素集合。当发生这种情况时，实际上是新的元素集合被压入到对象内部维护的栈中。每次过滤方法都会被压入栈中。当我们需要返回到前一个状态时，我们可以使用end() 进行出栈操作，来返回栈中的前一个状态。

假设页面上有几个短的列表 

  1. <ul class="first">
  2.    <li class="foo">list item 1</li>
  3.    <li>list item 2</li>
  4.    <li class="bar">list item 3</li>
  5. </ul>
  6. <ul class="second">
  7.    <li class="foo">list item 1</li>
  8.    <li>list item 2</li>
  9.    <li class="bar">list item 3</li>
  10. </ul>

end() 方法主要用于 jQuery 的链式属性中。当没有使用链式用法时，我们通常只是调用变量名上的前一个对象，所以我们不需要操作栈。使用 end() 时，我们可以一次性调用所有需要的方法： 

  1. $('ul.first').find('.foo').css('background-color', 'red')
  2.   .end().find('.bar').css('background-color', 'green');

在上面的代码中，首先在链式用法中只在第一个列表中查找样式为 foo 的项目，并将其背景色变成红色。然后 end() 返回调用 find() 之前的状态。因此，第二次 find() 将只会查找 <ul class="first"> 中的 '.bar'，而不是继续在 <li class="foo"> 中进行查找，结果是将匹配到的元素的背景色变成绿色。上述代码的最终结果是，第一个列表中的第 1 和第 3 个列表项的背景色有颜色，而第二个列表中的任何项目都没有背景色。

对于一个长的 jQuery 链式写法，可以使用结构块的写法，让其具有很好的可读性，即：将 end() 方法与其对应的过滤方法写在一个嵌套块中，例如： 

  1. $('ul.first').find('.foo')
  2.   .css('background-color', 'red')
  3. .end().find('.bar')
  4.   .css('background-color', 'green')
  5. .end();

最后的end()是不必要的，我们丢弃紧随其后的jQuery对象。然而，当编写这种形式的代码，end()提供了可视化的对称性和完整性，至少一些开发者的眼中，更具可读性，这样存在一些性能成本，因为它是一个额外的函数调用。

示例

实例

选择所有的段落，在其中查找 span 元素，之后再恢复到选择段落的状态。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.   p, div { margin:1px; padding:1px; font-weight:bold;
  6.            font-size:16px; }
  7.   div { color:blue; }
  8.   b { color:red; }
  9.   </style>
  10.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  11. </head>
  12. <body>
  13.   <p>
  14.     Hi there <span>how</span> are you <span>doing</span>?
  15.   </p>
  16.  
  17.   <p>
  18.     This <span>span</span> is one of
  19.     several <span>spans</span> in this
  20.     <span>sentence</span>.
  21.   </p>
  22.  
  23.   <div>
  24.     Tags in jQuery object initially: <b></b>
  25.   </div>
  26.   <div>
  27.     Tags in jQuery object after find: <b></b>
  28.  
  29.   </div>
  30.   <div>
  31.     Tags in jQuery object after end: <b></b>
  32.   </div>
  33. <script>
  34. jQuery.fn.showTags = function (n) {
  35.   var tags = this.map(function () {
  36.                           return this.tagName;
  37.                         })
  38.                     .get().join(", ");
  39.   $("b:eq(" + n + ")").text(tags);
  40.   return this;
  41. };
  42.  
  43. $("p").showTags(0)
  44.       .find("span")
  45.       .showTags(1)
  46.       .css("background", "yellow")
  47.       .end()
  48.       .showTags(2)
  49.       .css("font-style", "italic");
  50.  
  51. </script>
  52.  
  53. </body>
  54. </html>

运行一下

实例

Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs. 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>p { margin:10px; padding:10px; }</style>
  5.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. </head>
  7. <body>
  8.   <p><span>Hello</span>, how are you?</p>
  9. <script>$("p").find("span").end().css("border", "2px red solid");</script>
  10.  
  11. </body>
  12. </html>

运行一下

还没有评论.