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

166 lines
12 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">jQuery.grep()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/utilities/">工具类</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/jQuery.grep/" target="_blank">jQuery.grep()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-grep1"><h2 class="section-title">
<span class="name">jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] )</span><span class="returns">返回: <a href="/Types/#Array">Array</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>查找满足过滤函数的数组元素。原始数组不受影响。</p>
<ul class="signatures"><li class="signature" id="jQuery-grep-array-functionelementOfArray--indexInArray-invert">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] )</h4>
<ul>
<li>
<div><strong>array</strong></div>
<div>类型: <a href="/Types/#Array">Array</a>
</div>
<div>用于查询元素的数组。</div>
</li>
<li>
<div><strong>function(elementOfArray, indexInArray)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>该函数来处理每项元素的比对。第一个参数是正在被检查的数组的元素,第二个参数是该元素的索引值。该函数应返回一个布尔值。<code>this</code>将是全局的window对象。</div>
</li>
<li>
<div><strong>invert</strong></div>
<div>类型: <a href="/Types/#Boolean">Boolean</a>
</div>
<div>
如果“invert”为false或没有提供函数返回一个“callback”中返回true的所有元素组成的数组。如果“invert”为true函数返回一个“callback”中返回false的所有元素组成的数组。
</div>
</li>
</ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p><code>$.grep()</code>方法会删除数组必要的元素以使所有剩余元素通过过滤函数的检查。该测试是一个函数传递一个数组元素和该数组内这个的索引值。只有当测试返回true该数组元素将返回到结果数组中。</p>
<p> 该过滤器的函数将被传递两个参数:当前正在被检查的数组中的元素,及该元素的索引值。该过滤器函数必须返回'true'以包含在结果数组项。</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">F过滤出原始数组中值不为 5并且索引值大于 4 的元素。然后再过滤掉所有值为 9 的元素。</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>
</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">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">p</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">green;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">0</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">span</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">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">p</span>&gt;</span><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">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</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">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> arr = [ <span class="number">1</span>, <span class="number">9</span>, <span class="number">3</span>, <span class="number">8</span>, <span class="number">6</span>, <span class="number">1</span>, <span class="number">5</span>, <span class="number">9</span>, <span class="number">4</span>, <span class="number">7</span>, <span class="number">3</span>, <span class="number">8</span>, <span class="number">6</span>, <span class="number">9</span>, <span class="number">1</span> ];</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).text(arr.join(<span class="string">", "</span>));</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>arr = jQuery.grep(arr, <span class="keyword">function</span>(n, i){</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> (n != <span class="number">5</span> &amp;&amp; i &gt; <span class="number">4</span>);</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>).text(arr.join(<span class="string">", "</span>));</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>arr = jQuery.grep(arr, <span class="function"><span class="keyword">function</span> <span class="params">(a)</span> {</span> <span class="keyword">return</span> a != <span class="number">9</span>; });</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"span"</span>).text(arr.join(<span class="string">", "</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">过滤出数组中值大于 0 的元素。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<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>$.grep( [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>], <span class="keyword">function</span>(n,i){</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> n &gt; <span class="number">0</span>;</code></div></div><div class="container"><div class="line"><code> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<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="number">1</span>, <span class="number">2</span>] </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">过滤出数组中值不大于 0 的元素。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<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>$.grep( [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>], <span class="keyword">function</span>(n,i){</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> n &gt; <span class="number">0</span>;</code></div></div><div class="container"><div class="line"><code>},<span class="literal">true</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<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="number">0</span>] </code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>