Jquery-traversing

提供：Dev Guides
移動先:案内、検索

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）*メソッドを使用して直接見つけることができます。
  • すべての子要素はインデックスをゼロから開始するため、* $（ "li"）。eq（1）*などを使用して、_list item 2_にアクセスします。

例

次は、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）*メソッドを使用して、指定したセレクターと一致しない一致した要素のセットからすべての要素をフィルターで除外できます。 _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）*メソッドを使用して、特定のタイプの要素のすべての子孫要素を見つけることができます。 _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>

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

JQuery DOMフィルターメソッド

次の表は、DOM要素のリストからさまざまな要素を除外するために使用できる便利なメソッドを示しています。

Sr.No. Method & Description
1

eq( index )

一致する要素のセットを単一の要素に減らします。

2

filter( selector )

指定したセレクターと一致しない一致した要素のセットからすべての要素を削除します。

3

filter( fn )

指定した関数と一致しない一致した要素のセットからすべての要素を削除します。

4

is( selector )

現在の選択を式と照合し、選択の少なくとも1つの要素が指定されたセレクタに適合する場合はtrueを返します。

5

map( callback )

jQueryオブジェクトの要素のセットをjQuery配列の別の値のセット（要素を含む場合と含まない場合がある）に変換します。

6

not( selector )

指定したセレクターに一致する要素を、一致した要素のセットから削除します。

7

slice( start, [end )]

一致した要素のサブセットを選択します。

JQuery DOMトラバースメソッド

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

Sr.No. Methods & Description
1

add( selector )

指定されたセレクターと一致する要素を、一致した要素のセットに追加します。

2

andSelf( )

前の選択を現在の選択に追加します。

3

children( [selector)]

一致した一連の要素のそれぞれの一意の直接の子をすべて含む一連の要素を取得します。

4

closest( selector )

指定されたセレクタに一致する最も近い親要素を含む要素のセットを取得します。開始要素が含まれます。

5

contents( )

一致した要素（テキストノードを含む）内のすべての子ノード、または要素がiframeの場合はコンテンツドキュメントを検索します。

6

end( )

一致した要素のセットを以前の状態に変更して、最新の「破壊的な」操作を元に戻します。

7

find( selector )

指定されたセレクターに一致する子孫要素を検索します。

8

next( [selector )]

与えられた要素の集合のそれぞれの固有の次の兄弟を含む要素の集合を取得します。

9

nextAll( [selector )]

現在の要素の後の兄弟要素をすべて検索します。

10

offsetParent( )

最初に一致した要素の配置された親を持つjQueryコレクションを返します。

11

parent( [selector )]

要素の直接の親を取得します。 一連の要素に対して呼び出された場合、parentは一意の直接の親要素のセットを返します。

12

parents( [selector )]

一致した要素セットの一意の祖先を含む要素セットを取得します（ルート要素を除く）。

13

prev( [selector )]

一致した要素セットのそれぞれの一意の以前の兄弟を含む要素セットを取得します。

14

prevAll( [selector )]

現在の要素の前にあるすべての兄弟要素を見つけます。

15

siblings( [selector )]

一致した要素セットのそれぞれの一意の兄弟をすべて含む要素セットを取得します。

「https://www.finddevguides.com/index.php?title=Jquery-traversing&oldid=15527」から取得
Powered by MediaWiki