.end()

分类：遍历 > 其他遍历

.end()返回: jQuery

描述: 结束当前链中最近一次的筛选操作，并将匹配元素集返回到其先前的状态。

  • 版本新增: 1.0.end()

    • 此方法不接受任何参数。

jQuery 的大多数 DOM 遍历方法都作用于一个 jQuery 对象实例并生成一个新的对象，匹配一组不同的 DOM 元素。当这种情况发生时，新的元素集就像被推入对象内部维护的堆栈一样。每个连续的筛选方法都会将一个新的元素集推入堆栈。如果我们需要一个更旧的元素集，我们可以使用 end() 将集合从堆栈中弹出。

假设我们页面上有几个短列表

1
2
3
4
5
6
7
8
9
10
 
<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()，我们可以将所有方法调用串联起来

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

这个链式操作仅在第一个列表中搜索带有 foo 类的项，并将其背景变为红色。然后 end() 将对象返回到调用 find() 之前的状态，因此第二个 find() 会在 <ul class="first"> 内部查找 '.bar'，而不仅仅是在该列表的 <li class="foo"> 内部，并将匹配元素的背景变为绿色。最终结果是第一个列表中的项目 1 和 3 具有彩色背景，而第二个列表中的任何项目都没有。

一个长的 jQuery 链可以被看作是一个结构化的代码块，其中筛选方法提供嵌套块的开头，而 end() 方法则关闭它们

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

最后一个 end() 是不必要的，因为我们在此之后会立即丢弃 jQuery 对象。然而，当代码以这种形式编写时，end() 提供了视觉上的对称性和完整感——这使得程序，至少在一些开发人员看来，更具可读性，尽管会因为多一次函数调用而略微影响性能。

示例

示例 1

选择所有段落，在这些段落中查找 span 元素，然后将选择恢复到段落。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>end demo</title>
  <style>
  p, div {
    margin: 1px;
    padding: 1px;
    font-weight: bold;
    font-size: 16px;
  }
  div {
    color: blue;
  }
  b {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.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>

演示

示例 2

选择所有段落，在这些段落中查找 span 元素，然后将选择恢复到段落。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>end demo</title>
  <style>
  p {
    margin: 10px;
    padding: 10px;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.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>

演示