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

通常、セレクターは必要な要素を直接見つけることができますが、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 = $('#swift'); // 获得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 = $('#swift');

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

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

Filtering

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

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

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

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

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

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

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

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

関連する推奨事項:

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

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

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

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