197 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.end()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/traversing/">遍历</a> &gt; <a href="/category/traversing/miscellaneous-traversal/">其它遍历</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/end/" target="_blank">.end()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="end1"><h2 class="section-title">
<span class="name">.end()</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>
终止在当前链的最新过滤操作,并返回匹配的元素的以前状态。</p>
<ul class="signatures"><li class="signature" id="end">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.end()</h4>
<ul><li><div class="null-signature">这个方法不接受任何参数。</div></li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>
大多数 jQuery<a href="/category/traversing">DOM遍历</a> 方法来操作 jQuery 对象实例,并创建一个新的对象,匹配一个不同的 DOM 元素集合。当发生这种情况时,实际上是新的元素集合被压入到对象内部维护的栈中。每次过滤方法都会被压入栈中。当我们需要返回到前一个状态时,我们可以使用<code>end()</code> 进行出栈操作,来返回栈中的前一个状态。
</p>
<p>假设页面上有几个短的列表</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">"first"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"foo"</span>&gt;</span>list item 1<span class="tag">&lt;/<span class="title">li</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">li</span>&gt;</span>list item 2<span class="tag">&lt;/<span class="title">li</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"bar"</span>&gt;</span>list item 3<span class="tag">&lt;/<span class="title">li</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">class</span>=<span class="value">"second"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"foo"</span>&gt;</span>list item 1<span class="tag">&lt;/<span class="title">li</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">li</span>&gt;</span>list item 2<span class="tag">&lt;/<span class="title">li</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"bar"</span>&gt;</span>list item 3<span class="tag">&lt;/<span class="title">li</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p><code>end()</code> 方法主要用于 jQuery 的链式属性中。当没有使用链式用法时,我们通常只是调用变量名上的前一个对象,所以我们不需要操作栈。使用 <code>end()</code> 时,我们可以一次性调用所有需要的方法:
</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'ul.first'</span>).find(<span class="string">'.foo'</span>).css(<span class="string">'background-color'</span>, <span class="string">'red'</span>)</code></div></div><div class="container"><div class="line"><code> .end().find(<span class="string">'.bar'</span>).css(<span class="string">'background-color'</span>, <span class="string">'green'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>在上面的代码中,首先在链式用法中只在第一个列表中查找样式为 <code>foo</code> 的项目,并将其背景色变成红色。然后 <code>end()</code> 返回调用 <code>find()</code> 之前的状态。因此,第二次 <code>find()</code> 将只会查找 <code>&lt;ul class="first"&gt;</code> 中的 '.bar',而不是继续在 <code>&lt;li class="foo"&gt;</code> 中进行查找,结果是将匹配到的元素的背景色变成绿色。上述代码的最终结果是,第一个列表中的第 1 和第 3 个列表项的背景色有颜色,而第二个列表中的任何项目都没有背景色。
</p>
<p>对于一个长的 jQuery 链式写法,可以使用结构块的写法,让其具有很好的可读性,即:将 <code>end()</code> 方法与其对应的过滤方法写在一个嵌套块中,例如:
</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'ul.first'</span>).find(<span class="string">'.foo'</span>)</code></div></div><div class="container"><div class="line"><code> .css(<span class="string">'background-color'</span>, <span class="string">'red'</span>)</code></div></div><div class="container"><div class="line"><code>.end().find(<span class="string">'.bar'</span>)</code></div></div><div class="container"><div class="line"><code> .css(<span class="string">'background-color'</span>, <span class="string">'green'</span>)</code></div></div><div class="container"><div class="line"><code>.end();</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>最后的<code>end()</code>是不必要的我们丢弃紧随其后的jQuery对象。然而当编写这种形式的代码<code>end()</code>提供了可视化的对称性和完整性,至少一些开发者的眼中,更具可读性,这样存在一些性能成本,因为它是一个额外的函数调用。</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">选择所有的段落,在其中查找 span 元素,之后再恢复到选择段落的状态。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
<div class="line n40">40</div>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
<div class="line n45">45</div>
<div class="line n46">46</div>
<div class="line n47">47</div>
<div class="line n48">48</div>
<div class="line n49">49</div>
<div class="line n50">50</div>
<div class="line n51">51</div>
<div class="line n52">52</div>
<div class="line n53">53</div>
<div class="line n54">54</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">p</span>, <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">1</span>px;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">1</span>px;</span></span> <span class="rule"><span class="attribute">font-weight</span>:<span class="value">bold;</span></span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">16</span>px;</span></span> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">b</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Hi there <span class="tag">&lt;<span class="title">span</span>&gt;</span>how<span class="tag">&lt;/<span class="title">span</span>&gt;</span> are you <span class="tag">&lt;<span class="title">span</span>&gt;</span>doing<span class="tag">&lt;/<span class="title">span</span>&gt;</span>?</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> This <span class="tag">&lt;<span class="title">span</span>&gt;</span>span<span class="tag">&lt;/<span class="title">span</span>&gt;</span> is one of</code></div></div><div class="container"><div class="line"><code> several <span class="tag">&lt;<span class="title">span</span>&gt;</span>spans<span class="tag">&lt;/<span class="title">span</span>&gt;</span> in this</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">span</span>&gt;</span>sentence<span class="tag">&lt;/<span class="title">span</span>&gt;</span>.</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Tags in jQuery object initially: <span class="tag">&lt;<span class="title">b</span>&gt;</span><span class="tag">&lt;/<span class="title">b</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Tags in jQuery object after find: <span class="tag">&lt;<span class="title">b</span>&gt;</span><span class="tag">&lt;/<span class="title">b</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Tags in jQuery object after end: <span class="tag">&lt;<span class="title">b</span>&gt;</span><span class="tag">&lt;/<span class="title">b</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>jQuery.fn.showTags = <span class="function"><span class="keyword">function</span> <span class="params">(n)</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> tags = <span class="keyword">this</span>.map(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> <span class="keyword">this</span>.tagName;</code></div></div><div class="container"><div class="line"><code> })</code></div></div><div class="container"><div class="line"><code> .get().join(<span class="string">", "</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"b:eq("</span> + n + <span class="string">")"</span>).text(tags);</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> <span class="keyword">this</span>;</code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).showTags(<span class="number">0</span>)</code></div></div><div class="container"><div class="line"><code> .find(<span class="string">"span"</span>)</code></div></div><div class="container"><div class="line"><code> .showTags(<span class="number">1</span>)</code></div></div><div class="container"><div class="line"><code> .css(<span class="string">"background"</span>, <span class="string">"yellow"</span>)</code></div></div><div class="container"><div class="line"><code> .end()</code></div></div><div class="container"><div class="line"><code> .showTags(<span class="number">2</span>)</code></div></div><div class="container"><div class="line"><code> .css(<span class="string">"font-style"</span>, <span class="string">"italic"</span>);</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">10</span>px;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">10</span>px;</span></span> <span class="rule">}</span></span></span><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">p</span>&gt;</span><span class="tag">&lt;<span class="title">span</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">span</span>&gt;</span>, how are you?<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript">$(<span class="string">"p"</span>).find(<span class="string">"span"</span>).end().css(<span class="string">"border"</span>, <span class="string">"2px red solid"</span>);</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>