ホームページ > 記事 > ウェブフロントエンド > 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 = $('ul.lang'); // 获得<ul> var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme var swf = ul.find('#swift'); // 获得Swift var hsk = ul.find('[name=haskell]'); // 获得Haskell
現在のノードから上方向に検索したい場合は、parent() を使用します。 メソッド:
var swf = $('#swift'); // 获得Swift var parent = swf.parent(); // 获得Swift的上层节点<ul> var a = swf.parent('p.red'); // 从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()方法一致
関連する推奨事項:
以上がjQueryの検索とフィルタの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。