[JS] セレクターの階層について

タグ :

jQuery の勉強をまとめるシリーズです。
今回は「セレクターの階層」がある場合の検索についてまとめます。

階層の検索

html では、div 要素の中に p 要素が入っていたり、span 要素がその中に入っていたりする記述が多いと思います。
その事を div 要素に p 要素がネスト(入れ子)していると言ったりします。
そのような要素がネストして階層化している場合の検索には、jQuery のセレクターに要素を空白区切りで指定することで解決します。

[ 構文 ]
$(“親要素 子要素”)
[ コード ]
$(function() {
	$("button").click(function (){
		$("#div1 p").addClass("bg_blue");
	});
});

3行目の $() 内は div1 内にある p という意味。

<h4>セレクターの階層</h4>
<div id="div1">
	<p>div1 階層直下</p>
	<div id="div2">
		<p>div2 階層直下</p>
	</div>
</div>
<button>クリック</button>

div1 要素内に p 要素、div2 要素がネストしており、
さらに div2 要素内にも p 要素がネストしているという構造です。

.bg_blue {
	background: blue;
}

背景色を青にするというスタイルです。

<div id="div1">
	<p class="bg_blue">div1 階層直下</p>
	<div id="div2">
		<p class="bg_blue">div2 階層直下</p>
	</div>
</div>

div1 要素内全ての p 要素へクラスが追加されます。

div 要素にネストしている p 要素が検索されます。
この場合、「$(“#div2 p”)」という指定にすると二つ目の要素のみが変更されます。

細かな検索

上記の html にて、一つ目のみを変更させたい場合は、「$(“#div1 > p”)」というように「>」を使用する事で可能となります。

[ 構文 ]
$(“親要素 > 子要素”)
[ コード ]
$(function() {
	$("button").click(function (){
		$("#div1 > p").addClass("bg_blue");
	});
});

3行目の $() 内は div1 直下にある p という意味。

<h4>セレクターの階層</h4>
<div id="div1">
	<p>div1 階層直下</p>
	<div id="div2">
		<p>div2 階層直下</p>
	</div>
</div>
<button>クリック</button>

div1 要素内に p 要素、div2 要素がネストしており、
さらに div2 要素内にも p 要素がネストしているという構造です。

.bg_blue {
	background: blue;
}

背景色を青にするというスタイルです。

<div id="div1">
	<p class="bg_blue">div1 階層直下</p>
	<div id="div2">
		<p>div2 階層直下</p>
	</div>
</div>

div1 要素直下の p 要素にのみクラスが追加されます。

一つ目の要素のみが変更されます。
これは、div1 要素直下の p 要素のみを検索するという意味になるからです。

まとめ

セレクターによる要素の検索には、細かな指定が可能です。
これ以外には前記事「スタイルの変更」に書いてあるフィルターを使用してもできます。
どちらかといえば、フィルターの使用は階層化された要素には向いていないような気がしますが、それぞれを使い分けすることで、複雑な要素構造にも対応できるようになります。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed