当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。