.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.jquery.com/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.jquery.com/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>

示範