.end()

.end() 官网原E文: jQuery

描述: 终止在当前链的最新过滤操作,并返回匹配的元素集合为它以前的状态。

  • version added: 1.0.end()

最具jQuery的DOM遍历方法操作一个jQuery对象的实例,产生一个新的,当发生这种情况,这好像是一套新的元素推到一个堆栈里面的对象维护。每个连续的过滤方法推到一个新的元素堆栈设置。如果我们需要一个较旧的元素集,我们可以使用end()弹出套后退的堆栈。

假设我们有一个页面上的几个候选名单:

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>
<ul class="second">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

end()方法非常有用,当主要利用jQuery的链接属性。当不使用链,我们通常可以只调用了一支由变量名前面的对象,所以我们并不需要操作堆栈。随着end()虽然,我们可以串在一起的所有方法调用:

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

This chain searches for items with the class foo within the first list only and turns their backgrounds red. Then end() returns the object to its state before the call to find(), so the second find() looks for '.bar' inside <ul class="first">, not just inside that list's <li class="foo">, and turns the matching elements' backgrounds green. The net result is that items 1 and 3 of the first list have a colored background, and none of the items from the second list do.

A long jQuery chain can be visualized as a structured code block, with filtering methods providing the openings of nested blocks and end() methods closing them:

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

The last end() is unnecessary, as we are discarding the jQuery object immediately thereafter. However, when the code is written in this form, the end() provides visual symmetry and closure—making the program, at least to the eyes of some developers, more readable.

Examples:

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

<!DOCTYPE html>
<html>
<head>
  <style>
  p, div { margin:1px; padding:1px; font-weight:bold; 
           font-size:16px; }
  div { color:blue; }
  b { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <p>
    Hi there <span>how</span> are you <span>doing</span>?
  </p>

  <p>
    This <span>span</span> is one of 
    several <span>spans</span> in this
    <span>sentence</span>.
  </p>

  <div>
    Tags in jQuery object initially: <b></b>
  </div>
  <div>
    Tags in jQuery object after find: <b></b>

  </div>
  <div>
    Tags in jQuery object after end: <b></b>
  </div>
<script>

    jQuery.fn.showTags = function (n) {
      var tags = this.map(function () { 
                              return this.tagName; 
                            })
                        .get().join(", ");
      $("b:eq(" + n + ")").text(tags);
      return this;
    };

    $("p").showTags(0)
          .find("span")
          .showTags(1)
          .css("background", "yellow")
          .end()
          .showTags(2)
          .css("font-style", "italic");

</script>

</body>
</html>

Demo:

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

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

</body>
</html>

Demo:

jQuery 1.6 API 中文版Clove整理、修订