jQuery-DOMトラバース

jQueryは非常に強力なツールであり、さまざまなDOMトラバーサルメソッドを提供して、ドキュメント内の要素をランダムに選択したり、シーケンシャルメソッドで選択したりするのに役立ちます。ほとんどのDOMトラバーサルメソッドはjQueryオブジェクトを変更せず、特定の条件に基づいてドキュメントから要素を除外するために使用されます。

インデックスで要素を検索

次のHTMLコンテンツを含む単純なドキュメントを考えてみましょう-

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

これにより、次の結果が生成されます-

すべてのリストの上に独自のインデックスがあり、を使用して直接見つけることができます eq(index) 以下の例のような方法。
すべての子要素はゼロからインデックスを開始するため、リストアイテム2には次を使用してアクセスします。$("li").eq(1) 等々。

例

以下は、2番目のリストアイテムに色を追加する簡単な例です。

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

これにより、次の結果が生成されます-

要素の除外

ザ・ filter( selector )メソッドを使用して、指定されたセレクターと一致しない一致した要素のセットからすべての要素を除外できます。セレクタは、任意のセレクタの構文を使用して書き込むことができます。

例

以下は、中産階級に関連付けられたリストに色を適用する簡単な例です-

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

これにより、次の結果が生成されます-

子孫要素の検索

ザ・ find( selector )メソッドを使用して、特定のタイプの要素のすべての子孫要素を見つけることができます。セレクタは、任意のセレクタの構文を使用して書き込むことができます。

例

以下は、異なる<p>要素内で使用可能なすべての<span>要素を選択する例です-

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

これにより、次の結果が生成されます-

JQueryDOMフィルターメソッド

次の表に、DOM要素のリストからさまざまな要素を除外するために使用できる便利な方法を示します。

シニア番号	方法と説明
1	eq（インデックス）一致した要素のセットを1つの要素に減らします。
2	filter（セレクター）指定されたセレクターと一致しない一致した要素のセットからすべての要素を削除します。
3	filter（fn）指定された関数に一致しない一致した要素のセットからすべての要素を削除します。
4	is（セレクター）現在の選択を式と照合し、選択の少なくとも1つの要素が指定されたセレクターに適合する場合はtrueを返します。
5	map（コールバック） jQueryオブジェクトの要素のセットをjQuery配列の別の値のセットに変換します（要素が含まれる場合と含まれない場合があります）。
6	not（セレクター）一致した要素のセットから、指定したセレクターに一致する要素を削除します。
7	スライス（開始、[終了]）一致した要素のサブセットを選択します。

JQueryDOMトラバースメソッド

次の表に、DOM内のさまざまな要素を見つけるために使用できる他の便利な方法を示します。

シニア番号	方法と説明
1	add（セレクター）指定されたセレクターによって一致する要素を、一致する要素のセットに追加します。
2	andSelf（）前の選択を現在の選択に追加します。
3	子供（[セレクター]）一致した各要素セットの一意の直接の子をすべて含む要素セットを取得します。
4	最寄（セレクター）指定されたセレクターに一致する最も近い親要素を含む要素のセットを取得します。開始要素が含まれます。
5	内容（）一致した要素（テキストノードを含む）内のすべての子ノード、または要素がiframeの場合はコンテンツドキュメントを検索します。
6	終わり（）最新の「破壊的」操作を元に戻し、一致した要素のセットを以前の状態に変更します。
7	find（セレクター）指定されたセレクターに一致する子孫要素を検索します。
8	next（[セレクター]）指定された要素の各セットの一意の次の兄弟を含む要素のセットを取得します。
9	nextAll（[セレクター]）現在の要素の後のすべての兄弟要素を検索します。
10	offsetParent（）最初に一致した要素の親が配置されたjQueryコレクションを返します。
11	親（[セレクター]）要素の直接の親を取得します。要素のセットで呼び出された場合、parentは一意の直接の親要素のセットを返します。
12	親（[セレクター]）一致した要素のセット（ルート要素を除く）の一意の祖先を含む要素のセットを取得します。
13	prev（[セレクター]）一致した要素のセットのそれぞれの一意の前の兄弟を含む要素のセットを取得します。
14	prevAll（[セレクター]）現在の要素の前にあるすべての兄弟要素を検索します。
15	兄弟（[セレクター]）一致した各要素セットの一意の兄弟をすべて含む要素セットを取得します。

シニア番号	方法と説明
1	eq（インデックス）一致した要素のセットを1つの要素に減らします。
2	filter（セレクター）指定されたセレクターと一致しない一致した要素のセットからすべての要素を削除します。
3	filter（fn）指定された関数に一致しない一致した要素のセットからすべての要素を削除します。
4	is（セレクター）現在の選択を式と照合し、選択の少なくとも1つの要素が指定されたセレクターに適合する場合はtrueを返します。
5	map（コールバック） jQueryオブジェクトの要素のセットをjQuery配列の別の値のセットに変換します（要素が含まれる場合と含まれない場合があります）。
6	not（セレクター）一致した要素のセットから、指定したセレクターに一致する要素を削除します。
7	スライス（開始、[終了]）一致した要素のサブセットを選択します。

シニア番号	方法と説明
1	add（セレクター）指定されたセレクターによって一致する要素を、一致する要素のセットに追加します。
2	andSelf（）前の選択を現在の選択に追加します。
3	子供（[セレクター]）一致した各要素セットの一意の直接の子をすべて含む要素セットを取得します。
4	最寄（セレクター）指定されたセレクターに一致する最も近い親要素を含む要素のセットを取得します。開始要素が含まれます。
5	内容（）一致した要素（テキストノードを含む）内のすべての子ノード、または要素がiframeの場合はコンテンツドキュメントを検索します。
6	終わり（）最新の「破壊的」操作を元に戻し、一致した要素のセットを以前の状態に変更します。
7	find（セレクター）指定されたセレクターに一致する子孫要素を検索します。
8	next（[セレクター]）指定された要素の各セットの一意の次の兄弟を含む要素のセットを取得します。
9	nextAll（[セレクター]）現在の要素の後のすべての兄弟要素を検索します。
10	offsetParent（）最初に一致した要素の親が配置されたjQueryコレクションを返します。
11	親（[セレクター]）要素の直接の親を取得します。要素のセットで呼び出された場合、parentは一意の直接の親要素のセットを返します。
12	親（[セレクター]）一致した要素のセット（ルート要素を除く）の一意の祖先を含む要素のセットを取得します。
13	prev（[セレクター]）一致した要素のセットのそれぞれの一意の前の兄弟を含む要素のセットを取得します。
14	prevAll（[セレクター]）現在の要素の前にあるすべての兄弟要素を検索します。
15	兄弟（[セレクター]）一致した各要素セットの一意の兄弟をすべて含む要素セットを取得します。