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


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()。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。