jQueryトラバーサル
トラバーサルとは何ですか?
jQuery トラバーサルは「移動」を意味し、他の要素との関係に基づいて HTML 要素を「検索」(または選択) するために使用されます。選択範囲から開始し、目的の要素に到達するまでこの選択範囲に沿って移動します。
下の写真は家系図を示しています。 jQuery トラバーサルを使用すると、選択した (現在の) 要素から開始して、家系図内で上 (祖先)、下 (子孫)、および水平 (兄弟) に簡単に移動できます。この移動は DOM のトラバースと呼ばれます。
イラスト分析:
<div> 要素は <ul> 内のすべてのコンテンツの祖先です。
- <ul> 要素は <li> 要素の子要素です
- の親要素です;span>、
- の子要素であり、
- 要素は、
- の子であり、
- と
- 2 つの <li> 要素は兄弟です (同じ親要素を持っています)。
- 右側の <li> 要素は、<b> の親要素、<ul> の子要素であり、<div> の子孫です。 <b> 要素は、右側の <li> の子であり、<ul> と <div> の子孫です。
の子孫です。
先祖とは、父、祖父、曾祖父などです。子孫とは、子、孫、曾孫などのことです。兄弟は同じ親を共有します。
jQuery は、DOM を走査するためのさまざまなメソッドを提供します。トラバーサル手法の最も大きな種類はツリートラバーサル (ツリートラバーサル) です。
次の章では、DOM ツリー内で上、下、および同じレベルに移動する方法を説明します。
- の子であり、
の子孫です。 - 要素は、
<!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").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:300px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
<div style="width:300px;">div (祖父元素)
<p>p (父元素)
<span>span</span>
</p>
</div>
</div>
</body>
</html>
なし