jQuery トラバーサルの祖先

jQuery トラバーサル

トラバーサルとは何ですか?

jQuery トラバーサルは「移動」を意味し、他の要素との関係に基づいて HTML 要素を「検索」(または選択) するために使用されます。選択範囲から開始し、目的の要素に到達するまでこの選択範囲に沿って移動します。

下の写真は家系図を示しています。 jQuery トラバーサルを使用すると、選択した (現在の) 要素から開始して、家系図内で上 (祖先)、下 (子孫)、および水平 (兄弟) に簡単に移動できます。この移動は DOM のトラバースと呼ばれます。

<div> 要素は、<ul> 内のすべてのコンテンツの親要素です。

<ul> 要素は <li> 要素の子要素です

左側の <li> 要素は <span> <ul> 子要素であり、<div> の子孫です。

要素は、

の子であり、

の子孫です。

2 つの <li> 要素は兄弟です (同じ親要素を持っています)。

右側の <li> 要素は、<b> の親要素、<ul> の子要素であり、<div> の子孫です。

<b> 要素は、右側の <li> の子であり、<ul> と <div> の子孫です。

暖かいリマインダー: 先祖とは、父、祖父、曽祖父などです。子孫とは、子、孫、曾孫などのことです。兄弟は同じ親を共有します。

jQueryトラバーサル - 祖先

先祖とは、父、祖父、曽祖父などです。

jQuery を使用すると、DOM ツリーを遡って要素の祖先を見つけることができます。

DOM ツリーを上に移動する

これらの jQuery メソッドは、DOM ツリーを上に移動するのに役立ちます:

parent()parents()parentsUntil()

jQueryparent() メソッド

parent() メソッドは選択された要素を返します。 ■ 直接の親要素。

このメソッドは、1 レベル上の DOM ツリーのみを走査します。

jQueryparents() メソッド

parents() メソッドは、ドキュメントのルート要素 (<html>) に至るまで、選択された要素のすべての祖先要素を返します。

次の例は、すべての <span> 要素のすべての祖先を返します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parents().css({"color":"yellow","border":"1px solid pink"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>
</html>

jQueryparentsUntil() メソッド

parentsUntil() メソッドは、指定された 2 つの要素間のすべての祖先要素を返します。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors"> body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html>

提出するリセットコード

自動運転

前のセクション次のセクション

チュートリアルリスト

ヘルプの取得