Files
uTools-Manuals/docs/jQuery/filter.html
T
fofolee 38dcd51d8a v0.0.2
2019-04-21 11:50:48 +08:00

290 lines
24 KiB
HTML

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.filter()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/traversing/">遍历</a> &gt; <a href="/category/traversing/filtering/">过滤</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/filter/" target="_blank">.filter()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="filter1"><h2 class="section-title">
<span class="name">.filter( selector )</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="filter-selector">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.filter( 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="filter-functionindex">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.filter( function(index) )</h4>
<ul><li>
<div><strong>function(index)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>一个函数用作测试集合中的每个元素。<code>this</code> 是当前DOM元素。</div>
</li></ul>
</li>
<li class="signature" id="filter-element">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.filter( element )</h4>
<ul><li>
<div><strong>element</strong></div>
<div>类型: <a href="/Types/#Element">Element</a>
</div>
<div>一个匹配当前元素集合的元素。</div>
</li></ul>
</li>
<li class="signature" id="filter-jQuery-object">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.filter( jQuery object )</h4>
<ul><li>
<div><strong>jQuery object</strong></div>
<div>类型: <a href="/Types/#Object">Object</a>
</div>
<div>现有jQuery对象,用于进一步筛选当前元素集合。</div>
</li></ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>如果一个jQuery对象表示一个DOM元素的集合,<code>.filter()</code>方法构造了一个新的jQuery对象的子集。所提供的选择器是对每个元素进行测试;这个选择器匹配的所有元素将包含在结果中。</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>
</td>
<td class="code">
<pre><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>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>&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">li</span>&gt;</span>list item 4<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 5<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 6<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>我们可以在列表项目上设置此方法:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code> $(<span class="string">'li'</span>).filter(<span class="string">':even'</span>).css(<span class="string">'background-color'</span>, <span class="string">'red'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>该调用的结果是1,3,和5项的背景变为红色,因为他们匹配这个选择器(记得:even 和 :odd使用基于0的索引)。</p>
<h4 id="using-filter-function">Using a Filter Function(使用过滤函数)</h4>
<p>这种方法的第二种形式允许我们使用一个函数,而不是一个选择器来过滤元素,对于每个元素,如果函数返回<code>true</code> ,该元素将被包含在筛选集合中;否则,将被排除在外。假设我们有一个HTML片段:</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>&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">strong</span>&gt;</span>list<span class="tag">&lt;/<span class="title">strong</span>&gt;</span> item 1 -</code></div></div><div class="container"><div class="line"><code> one strong tag<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><span class="tag">&lt;<span class="title">strong</span>&gt;</span>list<span class="tag">&lt;/<span class="title">strong</span>&gt;</span> item <span class="tag">&lt;<span class="title">strong</span>&gt;</span>2<span class="tag">&lt;/<span class="title">strong</span>&gt;</span> -</code></div></div><div class="container"><div class="line"><code> two <span class="tag">&lt;<span class="title">span</span>&gt;</span>strong tags<span class="tag">&lt;/<span class="title">span</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>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">li</span>&gt;</span>list item 4<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 5<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 6<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>我们可以选择列表项,然后过滤它们的内容:</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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'li'</span>).filter(<span class="keyword">function</span>(index) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> $(<span class="string">'strong'</span>, <span class="keyword">this</span>).length == <span class="number">1</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>此代码只有第一个列表项将改变,因为它仅包含一个<code>&lt;strong&gt;</code>标签。过滤函数中的<code>this</code>是依次指向每个DOM元素。过滤函数中传入的 index 参数代表匹配的 jQuery 对象集合中 DOM 元素的索引。</p>
<p>我们可以利用过滤函数中的 <code>index</code> 参数,该参数是从 0 开始的索引值,此索引值代表未经过滤的匹配元素集合中的元素位置:</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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'li'</span>).filter(<span class="keyword">function</span>(index) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> index % <span class="number">3</span> == <span class="number">2</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>这对代码将会导致第三和第六列表项背景变为红色,因为它使用模运算符( <code>%</code> )选择每一个项目和<code>index</code>值,除以3时,余<code>2</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">改变所有 div 的颜色,然后为含有 "middle" 样式的 div 添加边框。</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>
</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">div</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">60</span>px;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">60</span>px;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule"><span class="attribute">float</span>:<span class="value">left;</span></span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">border</span>:<span class="value"><span class="number">2</span>px white solid;</span></span><span class="rule">}</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">div</span>&gt;</span><span class="tag">&lt;/<span class="title">div</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> <span class="attribute">class</span>=<span class="value">"middle"</span>&gt;</span><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> <span class="attribute">class</span>=<span class="value">"middle"</span>&gt;</span><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> <span class="attribute">class</span>=<span class="value">"middle"</span>&gt;</span><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> <span class="attribute">class</span>=<span class="value">"middle"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</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><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> </code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).css(<span class="string">"background"</span>, <span class="string">"#c8ebcc"</span>)</code></div></div><div class="container"><div class="line"><code> .filter(<span class="string">".middle"</span>)</code></div></div><div class="container"><div class="line"><code> .css(<span class="string">"border-color"</span>, <span class="string">"red"</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"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">C改变所有 div 的颜色,然后为第二个 div (index == 1) 及 id 为 "fourth" 的 div 添加边框。</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>
</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">div</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">60</span>px;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">60</span>px;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule"><span class="attribute">float</span>:<span class="value">left;</span></span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">border</span>:<span class="value"><span class="number">3</span>px white solid;</span></span> <span class="rule">}</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> </code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"first"</span>&gt;</span><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> <span class="attribute">id</span>=<span class="value">"second"</span>&gt;</span><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> <span class="attribute">id</span>=<span class="value">"third"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</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> <span class="attribute">id</span>=<span class="value">"fourth"</span>&gt;</span><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> <span class="attribute">id</span>=<span class="value">"fifth"</span>&gt;</span><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> <span class="attribute">id</span>=<span class="value">"sixth"</span>&gt;</span><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> $(<span class="string">"div"</span>).css(<span class="string">"background"</span>, <span class="string">"#b4b0da"</span>)</code></div></div><div class="container"><div class="line"><code> .filter(<span class="function"><span class="keyword">function</span> <span class="params">(index)</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> index == <span class="number">1</span> || $(<span class="keyword">this</span>).attr(<span class="string">"id"</span>) == <span class="string">"fourth"</span>;</code></div></div><div class="container"><div class="line"><code> })</code></div></div><div class="container"><div class="line"><code> .css(<span class="string">"border"</span>, <span class="string">"3px double red"</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-2">
<h4>Example: <span class="desc">选择所有的 div,并使用 DOM 元素进行筛选,过滤出 id 为 "unique" 的元素。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).filter( document.getElementById(<span class="string">"unique"</span>) )</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-3">
<h4>Example: <span class="desc">选择所有的 div,并使用 jQuery 对象进行筛选,过滤出 id 为 "unique" 的元素。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).filter( $(<span class="string">"#unique"</span>) )</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>