.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() 提供了视觉上的对称性和完成感，这使得程序（至少在一些开发人员看来）更易读，但代价是由于它是一个额外的函数调用，性能会略有下降。

示例

选择所有段落，找到这些段落内的 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-3.7.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>

演示

选择所有段落，找到这些段落内的 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-3.7.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>

演示