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

115 lines
10 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">.prevUntil()</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/prevUntil/" target="_blank">.prevUntil()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="prevUntil1"><h2 class="section-title">
<span class="name">.prevUntil( [selector ] [, filter ] )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>
获取每个元素但不包括选择器DOM节点或者jQuery对象匹配的元素的所有前面的兄弟元素。</p>
<ul class="signatures">
<li class="signature" id="prevUntil-selector-filter">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.prevUntil( [selector ] [, filter ] )</h4>
<ul>
<li>
<div><strong>selector</strong></div>
<div>类型: <a href="/Types/#Selector">Selector</a>
</div>
<div>选择器字符串,用于确定到哪个排在前面的同辈元素时停止匹配</div>
</li>
<li>
<div><strong>filter</strong></div>
<div>类型: <a href="/Types/#Selector">Selector</a>
</div>
<div>一个字符串,其中包含一个选择器表达式用来匹配的元素。</div>
</li>
</ul>
</li>
<li class="signature" id="prevUntil-element-filter">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.6/">1.6</a></span>.prevUntil( [element ] [, filter ] )</h4>
<ul>
<li>
<div><strong>element</strong></div>
<div>类型: <a href="/Types/#Element">Element</a>
</div>
<div>一个DOM节点或jQuery对象说明哪里开始停止匹配接下来的同级元素。</div>
</li>
<li>
<div><strong>filter</strong></div>
<div>类型: <a href="/Types/#Selector">Selector</a>
</div>
<div>一个字符串,其中包含一个选择器表达式用来匹配的元素。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>如果提供的jQuery代表了一组DOM元素 <code>.prevUntil()</code> 方法会找遍所有元素所在的DOM树中排在它们前面的元素直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素但不包括提供给 <code>.prevUntil()</code> 的选择器匹配到的元素。返回的元素顺序是从最靠近的兄弟元素到最远的兄弟元素。</p>
<p>如果提供的选择器没有匹配到任何东西,或者干脆没有提供选择器,那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 <a href="/prevAll"><code>.prevAll()</code></a> 效果一样。</p>
<p><strong>从 jQuery 1.6 开始</strong>, 一个DOM节点或jQuery对象
而不是一个选择器,
可被传递到<code>.prevUntil()</code>方法。</p>
<p>该方法选择性地接受一个选择器表达式作为它的第二个参数。如果提供此参数,将通过测试它们是否匹配过滤元素。</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">Find the siblings that precede &lt;dt id="term-2"&gt; up to the preceding &lt;dt&gt; and give them a red background color. Also, find previous &lt;dd&gt; siblings of &lt;dt id="term-3"&gt; up to &lt;dt id="term-1"&gt; and give them a green text color.</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>
</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">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">dl</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">dt</span> <span class="attribute">id</span>=<span class="value">"term-1"</span>&gt;</span>term 1<span class="tag">&lt;/<span class="title">dt</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">dd</span>&gt;</span>definition 1-a<span class="tag">&lt;/<span class="title">dd</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">dd</span>&gt;</span>definition 1-b<span class="tag">&lt;/<span class="title">dd</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">dd</span>&gt;</span>definition 1-c<span class="tag">&lt;/<span class="title">dd</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">dd</span>&gt;</span>definition 1-d<span class="tag">&lt;/<span class="title">dd</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">dt</span> <span class="attribute">id</span>=<span class="value">"term-2"</span>&gt;</span>term 2<span class="tag">&lt;/<span class="title">dt</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">dd</span>&gt;</span>definition 2-a<span class="tag">&lt;/<span class="title">dd</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">dd</span>&gt;</span>definition 2-b<span class="tag">&lt;/<span class="title">dd</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">dd</span>&gt;</span>definition 2-c<span class="tag">&lt;/<span class="title">dd</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">dt</span> <span class="attribute">id</span>=<span class="value">"term-3"</span>&gt;</span>term 3<span class="tag">&lt;/<span class="title">dt</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">dd</span>&gt;</span>definition 3-a<span class="tag">&lt;/<span class="title">dd</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">dd</span>&gt;</span>definition 3-b<span class="tag">&lt;/<span class="title">dd</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">dl</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="string">"#term-2"</span>).prevUntil(<span class="string">"dt"</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> </code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> term1 = document.getElementById(<span class="string">'term-1'</span>);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#term-3"</span>).prevUntil(term1, <span class="string">"dd"</span>)</code></div></div><div class="container"><div class="line"><code> .css(<span class="string">"color"</span>, <span class="string">"green"</span>);</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" data-height="250px"></div>
</div></section>
</div></article> </div>
</article>