ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryの検索とフィルタの例の詳細な説明

jQueryの検索とフィルタの例の詳細な説明

小云云
小云云オリジナル
2018-01-06 09:05:321326ブラウズ

通常、セレクターは必要な要素を直接見つけることができますが、jQuery オブジェクトを取得すると、このオブジェクトを検索とフィルターの基礎として使用することもできます。この記事では主に jQuery の検索とフィルタリングに関する情報を詳しく紹介しますので、興味のある方はぜひ参考にしてください。

最も一般的な検索は、find() メソッドを使用して、ノードのすべての子ノードの中から検索することです。このメソッド自体が任意のセレクターを受け取ります。たとえば、次の HTML 構造:


<!-- HTML结构 -->
<ul class="lang">
 <li class="js dy">JavaScript</li>
 <li class="dy">Python</li>
 <li id="swift">Swift</li>
 <li class="dy">Scheme</li>
 <li name="haskell">Haskell</li>
</ul>

検索するには find() を使用します:


var ul = $(&#39;ul.lang&#39;); // 获得<ul>
var dy = ul.find(&#39;.dy&#39;); // 获得JavaScript, Python, Scheme
var swf = ul.find(&#39;#swift&#39;); // 获得Swift
var hsk = ul.find(&#39;[name=haskell]&#39;); // 获得Haskell

現在のノードから上方向に検索したい場合は、parent() を使用します。 メソッド:


var swf = $(&#39;#swift&#39;); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent(&#39;p.red&#39;); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回

同じレベルのノードの場合、next() メソッドと prev() メソッドを使用できます。例:
When we have the Swift ノード:


var swift = $(&#39;#swift&#39;);

swift.next(); // Scheme
swift.next(&#39;[name=haskell]&#39;); // Haskell,因为Haskell是后续第一个符合选择器条件的节点

swift.prev(); // Python
swift.prev(&#39;.js&#39;); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点

Filtering

は関数型プログラミングのマップとフィルターに似ており、jQuery オブジェクトにも同様のメソッドがあります。
filter() メソッドは、セレクターの条件を満たさないノードをフィルターで除外できます:


var langs = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter(&#39;.dy&#39;); // 拿到JavaScript, Python, Scheme

または、関数に渡す場合は、関数内の this に特に注意してください。 jQuery オブジェクトではなく DOM オブジェクトとしてバインドされます:


var langs = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
 return this.innerHTML.indexOf(&#39;S&#39;) === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

map() メソッドは、jQuery オブジェクトに含まれる複数の DOM ノードを他のオブジェクトに変換します:


var langs = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
 return this.innerHTML;
}).get(); // 用get()拿到包含string的Array:[&#39;JavaScript&#39;, &#39;Python&#39;, &#39;Swift&#39;, &#39;Scheme&#39;, &#39;Haskell&#39;]

さらに、 jQuery オブジェクトに複数の DOM ノードが含まれている場合、first()、last()slice() メソッドは新しい jQuery オブジェクトを返し、不要な DOM ノードを削除できます:


var langs = $(&#39;ul.lang li&#39;); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript,相当于$(&#39;ul.lang li:first-child&#39;)
var haskell = langs.last(); // Haskell, 相当于$(&#39;ul.lang li:last-child&#39;)
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

関連する推奨事項:

2つの配列内の異なる要素を見つけるPHPの方法の詳細な説明

多次元配列内の指定された値を見つけるPHPの方法

配列検索関数を実装するPHPのバイナリ方法チュートリアル

以上がjQueryの検索とフィルタの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。