jQueryレッスン 階層セレクター・属性フィルター

【jQueryレッスン】階層セレクター・属性フィルタについて

ここでは、階層構造に基づくjQueryセレクターや属性による選択の制限をする方法を学んでいきましょう。

階層セレクター

jQueryではCSSセレクターと同じように階層構造に基づく選択ができます。

子孫セレクター

子孫セレクター
$(“先祖 子孫“)
先祖と子孫の間に半角スペースを入れます。

階層関係を指定してエレメントを選択します。
半角スペース区切りで複数のセレクタを指定すると左側のセレクターの内側にある右側のセレクターを選択します。
必ずしも直下である必要はありません。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// 半角スペースで階層関係を指定します。
	$("div .sample1").css("color","red");
});
</script>

<!-- HTML -->
<div>
	<p class="sample1">赤色を表示します</p>
</div>
<p>
	<span class="sample1">色は変わりません</span>
</p>
<div>
	<p>
		<span class="sample1">直下でなくても選択されます</span>
	</p>
</div>

実行結果

赤色を表示します

色は変わりません

直下でなくても選択されます

子セレクター

親セレクターの中の子セレクターを選択
$(“親 > 子“)
親セレクターと子セレクターの間に大なり記号(>)を入れます。

直下の子セレクタのみ選択します。孫は対象外となります。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// 大なり記号(>)を使用します。
	$("#s_main>span").css("background","red");
});
</script>

<!-- HTML -->
<div id="s_main">
	<span>背景が赤になります</span>
	<p>背景色はつきません</p>
	<p>
		<span>直下の子ではないので色はつきません<span>
	</p>
</div>
<div id="s_sub">
	<span>背景色はつきません<span>
</div>

実行結果

背景が赤になります

背景色はつきません

直下の子ではないので色はつきません

背景色はつきません

隣接セレクター

前後関係を指定して選択
$(“前要素 + 次要素“)
前要素セレクターと次要素セレクターの間にプラス記号(+)を入れます。

前後関係を指定して要素を選択します。
左側のセレクターの次に右側のセレクターが来た場合にマッチします。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// プラス記号(+)を使用します。
	$("h6 + p").css("border","1px solid red");
});
</script>

<!-- HTML -->
<h6>第1章 XXXについて</h6>
<p>ここに枠線がつきます</p>
<p>通常の文章</p>
<p>通常の文章</p>

<h6>第2章 〇〇〇について</h6>
<p>ここに枠線がつきます</p>
<p>通常の文章</p>
<p>通常の文章</p>

<h6>第3章 □□□について</h6>
<div>
	<p>直後にないと枠線はつきません</p>
</div>
<p>通常の文章</p>
<p>通常の文章</p>

実行結果

第1章 XXXについて

ここに枠線がつきます

通常の文章

通常の文章

第2章 〇〇〇について

ここに枠線がつきます

通常の文章

通常の文章

第3章 □□□について

直後にないと枠線はつきません

通常の文章

通常の文章

一般兄弟セレクター

兄弟関係を指定して要素を選択
$(“前要素 ~ 後要素“)
前要素セレクターと後要素セレクターの間にチルダ記号(~)を入れます。

兄弟関係を指定して要素を選択します。
左側のセレクター以降に出てくる右側のセレクター全てにマッチします。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// チルダ記号(~)を使用します。
	$("h6 ~ p").css("border","1px solid red");
});
</script>

<!-- HTML -->
<h6>第1章 XXXについて</h6>
<p>この文章以降に枠線がつきます</p>
<p>文章</p>
<p>文章</p>

<h6>第2章 〇〇〇について</h6>
<p>この文章以降に枠線がつきます</p>
<p>文章</p>
<p>文章</p>

<h6>第3章 □□□について</h6>
<div>
	<p>兄弟でないと枠線はつきません</p>
</div>
<p>文章</p>
<p>文章</p>

実行結果

第1章 XXXについて

この文章以降に枠線がつきます

文章

文章

第2章 〇〇〇について

この文章以降に枠線がつきます

文章

文章

第3章 □□□について

兄弟でないと枠線はつきません

文章

文章

属性フィルター

要素の属性を元に選択するセレクターです。
DOM要素内の属性をキーにして選択します。

サンプルを見てみましょう。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	$("a[title=sample1]").css("color","red");
	$(".second[title=sample2]").css("color","blue");
});
</script>

<!-- HTML -->
<a href="" title="sample1">サンプル1</a>
<a href="" title="sample2" class="second">サンプル2</a>

実行結果

サンプル1
サンプル2

HTML5から独自データ属性でデータを自由に設定できるようになっていますので、属性での選択は使い勝手が良いです。

[属性名]

属性名を指定して要素を選択
$(“[属性名]“)
[]の中に属性名を指定します。

指定した属性を持っている要素を抽出します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// [属性名]で選択すると、その属性をもつすべてのタグに適用されます
	$("[title]").css("color","red");
});
</script>

<!-- HTML -->
<a href="" title="sample1">サンプル1</a>
<a href="">サンプル2</a>
<a href="" class="sample">サンプル3</a>
<p title="sample4">サンプル4</a>
<p>サンプルの文章です。<span title="sample5">ここは赤色になります</span></p>

実行結果

サンプル1
サンプル2
サンプル3

サンプル4

サンプルの文章です。ここは赤色になります

[属性名 = 値]

属性が特定の値を持っている要素を選択
$(“[属性名 = 値]“)
[]の中に属性名=値で指定します。

属性が特定の値を持っている要素を抽出します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// [属性名=値]で選択すると、値と完全一致した属性を持つ要素を絞り込みます
	$("[title=sample5]").css("color","red");
});
</script>

<!-- HTML -->
<a href="" title="sample1">サンプル1</a>
<a href="">サンプル2</a>
<a href="" class="sample">サンプル3</a>
<p title="sample4">サンプル4</a>
<p>サンプルの文章です。<span title="sample5">ここは赤色になります</span></p>

実行結果

サンプル1
サンプル2
サンプル3

サンプル4

サンプルの文章です。ここは赤色になります

[属性名 != 値]

属性が特定の値を持っていない要素を選択
$(“[属性名 != 値]“)
[]の中に属性名!=値で指定します。

属性が特定の値を持っていない要素を抽出します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// [属性名!=値]で選択すると、値と完全一致することのない属性を絞り込みます
	// a要素のtitle=appleではない要素を選択します
	$("a[title!=apple]").css("color","red");
});
</script>

<!-- HTML -->
<a href="" title="apple">選択されません</a>
<a href="" title="banana">赤色になります</a>
<a href="">title属性がなくても赤色になります</a>
<p href="" title="banana">titleはappleではないが、p要素なので選択されません</p>

実行結果

選択されません
赤色になります
title属性がなくても赤色になります

titleはappleではないが、p要素なので選択されません

[属性名 ^= 値]

属性が特定の文字列から始まる要素を選択
$(“[属性名 ^= 値]“)
[]の中に属性名^=値で指定します。

属性が特定の文字列から始まる要素を抽出します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// input要素のname属性がreqで始まる値を選択
	$("input[name^=req]").val("選択されています");
});
</script>

<!-- HTML -->
<p><input name="req_name"></p>
<p><input name="address"></p>
<p><input name="req_pass"></p>

実行結果

[属性名 $= 値]

属性が特定の文字列で終わる要素を選択
$(“[属性名 $= 値]“)
[]の中に属性名$=値で指定します。

属性が特定の文字列で終わる要素を抽出します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// input要素のname属性がreqで終わる値を選択
	$("input[name$=req]").val("選択されています");
});
</script>

<!-- HTML -->
<p><input name="name_req"></p>
<p><input name="address"></p>
<p><input name="pass_req"></p>

実行結果

[属性名 *= 値]

属性が特定の文字列を含む要素を選択
$(“[属性名 *= 値]“)
[]の中に属性名*=値で指定します。

属性が特定の文字列を含む要素を抽出します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// input要素のname属性がreqを含むものを選択
	$("input[name*=req]").val("選択されています");
});
</script>

<!-- HTML -->
<p><input name="name_req2"></p>
<p><input name="address2"></p>
<p><input name="req_pass2"></p>

実行結果

[属性名 = 値][属性名 = 値] … [属性名 = 値]

属性セレクターを複数指定
$(“[属性名 = 値][属性名 = 値] … [属性名 = 値]“)
複数の指定条件全てに合致する要素を選択します。

属性セレクターを複数指定し、全てに合致する要素集合が返されます。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// input要素のname属性がreqを含むもので, ID属性があるものを選択します
	$("input[id][name*=req]").val("選択されています");
});
</script>

<!-- HTML -->
<p><input name="name_req2"></p>
<p><input name="address2"></p>
<p><input id="sample" name="req_pass2"></p>

実行結果

関連記事一覧

  1. この記事へのコメントはありません。

CAPTCHA