jQuery トラバーサル メソッドの詳細な説明: 何を知っていますか?

<p>

<p>jQuery は、DOM 要素を操作するための便利で高速なメソッドを多数提供する人気の JavaScript ライブラリです。 jQuery では、トラバーサル メソッドが非常に一般的に使用されており、DOM 要素の検索、フィルタリング、操作に役立ちます。この記事では、一般的に使用されるいくつかの jQuery トラバーサル メソッドを詳しく紹介し、具体的なコード例を添付します。

1. each()

<p>each() メソッドは、jQuery オブジェクト コレクション内の要素を走査するために最も一般的に使用されるメソッドの 1 つです。引数としてコールバック関数を受け取り、各要素で実行されます。以下に例を示します。

$("li").each(function(index) {
  console.log(index + ": " + $(this).text());
});

<p> 上記のコードは、すべての <li> 要素を走査し、シリアル番号とテキスト コンテンツを出力します。

2. find()

<p>find() メソッドは、現在の要素コレクション内のセレクターに一致する子要素を検索するために使用されます。以下に例を示します。

$("#container").find("p").css("color", "red");

<p>上記のコードは、#container 要素内のすべての <p> 要素のテキストの色を赤に設定します。

3. filter()

<p>filter() メソッドは、現在の要素コレクション内の条件を満たす要素をフィルター処理するために使用されます。以下に例を示します。

$("li").filter(":even").css("background-color", "lightgrey");

<p>上記のコードは、偶数番号の <li> 要素をすべて選択し、背景色を明るい灰色に設定します。

4. not()

<p>not() メソッドは、現在の要素コレクションから修飾された要素を削除するために使用されます。以下に例を示します。

$("li").not(".special").css("font-weight", "bold");

<p>上記のコードは、special クラスを持たないすべての <li> 要素を選択し、そのフォントを太字にします。

5. children()

<p>children() メソッドは、現在の要素の子要素を選択するために使用されます。以下に例を示します。

$("#container").children().css("border", "1px solid black");

<p>上記のコードは、#container 要素のすべての子要素に黒い境界線を追加します。

6. siblings()

<p>siblings() メソッドは、現在の要素の兄弟要素を選択するために使用されます。以下は例です。

$("li").siblings().addClass("highlight");

<p>上記のコードは、強調表示効果を実現するために、すべての <li> 要素の兄弟要素に highlight クラスを追加します。

<p>上記は、一般的に使用されるいくつかの jQuery トラバーサル メソッドの詳細な紹介とコード例です。この記事が、これらのメソッドの使用に習熟して DOM 要素を操作し、開発効率を向上させるのに役立つことを願っています。

以上がjQuery トラバーサル メソッドの詳細な説明: 何を知っていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。