當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

JQuery .end()用法及代碼示例

用法 
.end() => jQuery

說明：結束當前鏈中最近的過濾操作，並將匹配的元素集合返回到其先前的狀態。

  • 添加的版本：1.0.end()

    • 此方法不接受任何參數。

大多數 jQuery 的DOM traversal 方法對 jQuery 對象實例進行操作並生成一個新的對象實例，匹配一組不同的 DOM 元素。當這種情況發生時，就好像新的元素集被推到了一個在對象內部維護的堆棧上。每個連續的過濾方法都會將一個新元素集推入堆棧。如果我們需要一個較舊的元素集，我們可以使用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" );

此鏈僅在第一個列表中搜索具有類foo 的項目並將其背景變為紅色。然後 end() 將對象返回到調用 find() 之前的狀態，因此第二個 find() 在 <ul class="first"> 內查找 '.bar' ，而不僅僅是在該列表的 <li class="foo"> 內查找，並轉換匹配元素的背景綠色。最終結果是第一個列表的項目 1 和 3 具有彩色背景，而第二個列表中的所有項目都沒有。

長 jQuery 鏈可以可視化為結構化代碼塊，過濾方法提供嵌套塊的開口，end() 方法關閉它們：

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

最後一個end() 是不必要的，因為我們隨後會立即丟棄 jQuery 對象。但是，當以這種形式編寫代碼時，end() 提供了視覺上的對稱性和完成感——至少在一些開發人員看來，使程序更具可讀性，但代價是性能會受到輕微影響這是一個額外的函數調用。

例子：

選擇所有段落，在其中找到 span 元素，然後將選擇恢複為段落。

<!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.5.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 元素，然後將選擇恢複為段落。

<!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.5.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>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .end()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。