uTools-Manuals/docs/jQuery/closest.html
2019-04-21 11:50:48 +08:00

306 lines
24 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">.closest()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/traversing/">遍历</a> &gt; <a href="/category/traversing/tree-traversal/">树遍历</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/closest/" target="_blank">.closest()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li>
<a href="#closest1">.closest( selector )</a><ul>
<li>.closest( selector )</li>
<li>.closest( selector [, context ] )</li>
<li>.closest( jQuery object )</li>
<li>.closest( element )</li>
</ul>
</li>
<li>
<a href="#closest2">.closest( selectors [, context ] )</a><ul><li>.closest( selectors [, context ] )</li></ul>
</li>
</ul>
</div><article class="entry method" id="closest1"><h2 class="section-title">
<span class="name">.closest( selector )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>从元素本身开始在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素。</p>
<ul class="signatures">
<li class="signature" id="closest-selector">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.3/">1.3</a></span>.closest( selector )</h4>
<ul><li>
<div><strong>selector</strong></div>
<div>类型: <a href="/Types/#Selector">Selector</a>
</div>
<div>一个用于匹配元素的选择器字符串。</div>
</li></ul>
</li>
<li class="signature" id="closest-selector-context">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.closest( selector [, context ] )</h4>
<ul>
<li>
<div><strong>selector</strong></div>
<div>类型: <a href="/Types/#Selector">Selector</a>
</div>
<div>一个用于匹配元素的选择器字符串。</div>
</li>
<li>
<div><strong>context</strong></div>
<div>类型: <a href="/Types/#Element">Element</a>
</div>
<div>DOM元素在其中一个匹配的元素可以被发现。如果没有上下文在当时的情况下通过了jQuery集合将被使用。</div>
</li>
</ul>
</li>
<li class="signature" id="closest-jQuery-object">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.6/">1.6</a></span>.closest( jQuery object )</h4>
<ul><li>
<div><strong>jQuery object</strong></div>
<div>类型: <a href="/Types/#jQuery">jQuery</a>
</div>
<div>一个用于匹配元素的jQuery对象。</div>
</li></ul>
</li>
<li class="signature" id="closest-element">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.6/">1.6</a></span>.closest( element )</h4>
<ul><li>
<div><strong>element</strong></div>
<div>类型: <a href="/Types/#Element">Element</a>
</div>
<div>一个用于匹配元素的DOM元素。</div>
</li></ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>鉴于一个jQuery对象表示一个DOM元素的集合<code>.closest()</code>方法允许我们在DOM树上查找这些匹配的元素和他们的祖先元素并且构造一个新的jQuery对象。<a href="/parents"><code>.parents()</code></a><code>.closest()</code>方法类似它们都在DOM树遍历了。两者之间的差异尽管细微是重要的</p>
<table>
<thead>
<tr>
<th>
<code>.closest()</code>
</th>
<th>
<a href="/parents">
<code>.parents()</code>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>开始于当前元素</td>
<td>开始于父元素</td>
</tr>
<tr>
<td>在 DOM 树中向上遍历,直到找到了与提供的选择器相匹配的元素</td>
<td>向上遍历DOM树到文档的根元素每个祖先元素加入到临时集合如果提供一个选择器则会使用该选择器在集合中进行过滤</td>
</tr>
<tr>
<td>返回包含零个或一个元素的jQuery对象</td>
<td>返回包含零个一个或多个元素的jQuery对象</td>
</tr>
</tbody>
</table>
<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>
<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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">ul</span> <span class="attribute">id</span>=<span class="value">"one"</span> <span class="attribute">class</span>=<span class="value">"level-1"</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">"item-i"</span>&gt;</span>I<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">id</span>=<span class="value">"ii"</span> <span class="attribute">class</span>=<span class="value">"item-ii"</span>&gt;</span>II</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">"level-2"</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">"item-a"</span>&gt;</span>A<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">"item-b"</span>&gt;</span>B</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">"level-3"</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">"item-1"</span>&gt;</span>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> <span class="attribute">class</span>=<span class="value">"item-2"</span>&gt;</span>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">"item-3"</span>&gt;</span>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">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">"item-c"</span>&gt;</span>C<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">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">"item-iii"</span>&gt;</span>III<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>假设我们从项目 A开始执行一个搜索<code>&lt;ul&gt;</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">'li.item-a'</span>).closest(<span class="string">'ul'</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></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这将改变level-2 <code>&lt;ul&gt;</code>的颜色因为当向上遍历DOM树时这是第一次遇到的匹配元素。</p>
<p>假设我们是一个搜索<code>&lt;li&gt;</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">'li.item-a'</span>).closest(<span class="string">'li'</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></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>其结果是改变了列表项 A 的元素。<code>.closest()</code>方法是<em>从自身元素</em>开始查找的,然后在 DOM 树中向上遍历,直到找到了所提供的表达式列表项 A。</p>
<p>我们可以传递一个DOM元素作为上下文在其中搜索最近的元素的。</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="keyword">var</span> listItemII = document.getElementById(<span class="string">'ii'</span>);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">'li.item-a'</span>).closest(<span class="string">'ul'</span>, listItemII)</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>$(<span class="string">'li.item-a'</span>).closest(<span class="string">'#one'</span>, listItemII)</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></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这将改变level-2 <code>&lt;ul&gt;</code>的颜色,因为它既是项目A的第一个<code>&lt;ul&gt;</code>祖先又是项目II的一个后裔。它将不会改变level-1 <code>&lt;ul&gt;</code>的 颜色 因为它不是项目II的后代。</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">显示什么样的事件委托能用closest完成。closest 列表元素或者其后代被点击进行切换一个黄色的背景。</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>
</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">li</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">3</span>px;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">3</span>px;</span></span> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#EEEEEE</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">li</span><span class="class">.hilight</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"> yellow;</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">ul</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">li</span>&gt;</span><span class="tag">&lt;<span class="title">b</span>&gt;</span>Click me!<span class="tag">&lt;/<span class="title">b</span>&gt;</span><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>You can also <span class="tag">&lt;<span class="title">b</span>&gt;</span>Click me!<span class="tag">&lt;/<span class="title">b</span>&gt;</span><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">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> $( document ).bind(<span class="string">"click"</span>, <span class="keyword">function</span>( e ) {</code></div></div><div class="container"><div class="line"><code> $( e.target ).closest(<span class="string">"li"</span>).toggleClass(<span class="string">"hilight"</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">传递一个jQuery对象给closest. closest 列表元素或者其后代被点击进行切换一个黄色的背景。</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>
</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">li</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">3</span>px;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">3</span>px;</span></span> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#EEEEEE</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">li</span><span class="class">.hilight</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"> yellow;</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">ul</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">li</span>&gt;</span><span class="tag">&lt;<span class="title">b</span>&gt;</span>Click me!<span class="tag">&lt;/<span class="title">b</span>&gt;</span><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>You can also <span class="tag">&lt;<span class="title">b</span>&gt;</span>Click me!<span class="tag">&lt;/<span class="title">b</span>&gt;</span><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">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> $listElements = $(<span class="string">"li"</span>).css(<span class="string">"color"</span>, <span class="string">"blue"</span>);</code></div></div><div class="container"><div class="line"><code> $( document ).bind(<span class="string">"click"</span>, <span class="keyword">function</span>( e ) {</code></div></div><div class="container"><div class="line"><code> $( e.target ).closest( $listElements ).toggleClass(<span class="string">"hilight"</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"><iframe height="250" width="100%"></iframe></div>
</div></section>
</div></article><article class="entry method" id="closest2"><h2 class="section-title">
<span class="name">.closest( selectors [, context ] )</span><span class="returns">返回: <a href="/Types/#Array">Array</a></span><span class="version-details">version deprecated: <a href="/category/version/1.7/">1.7</a>, removed: <a href="/category/version/1.8/">1.8</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>以数组的形式返回与选择器相匹配的所有元素,从当前元素开始,在 DOM 树中向上遍历。</p>
<ul class="signatures"><li class="signature" id="closest-selectors-context">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.closest( selectors [, context ] )</h4>
<ul>
<li>
<div><strong>selectors</strong></div>
<div>类型: <a href="/Types/#Array">Array</a>
</div>
<div>数组或字符串其中包含一个选择表达式匹配的元素对也可以是一个jQuery对象</div>
</li>
<li>
<div><strong>context</strong></div>
<div>类型: <a href="/Types/#Element">Element</a>
</div>
<div>用于查找可能匹配到的 DOM 元素。如果不提供 context 参数,那么会使用 jQuery 集合的 context。</div>
</li>
</ul>
</li></ul>
<div class="longdesc" id="entry-longdesc-1">
<p><strong>下面这个方法 (only!) jQuery1.7中不赞成使用在jQuery1.8中被<em>删除</em></strong>它主要是为了让插件作者在内部使用。</p>
</div>
</div></article> </div>
</article>