子要素フィルター 表示・非表示フィルター

【jQueryレッスン】jQueryセレクターの子要素フィルターと表示・非表示フィルター

jQueryのセレクターには表示・非表示フィルターと子要素フィルターと呼ばれるものがあります。
知っておくことで要素の選択方法の幅が広がり、プログラムのスキルアップにもつながりますので、しっかり学んでいきましょう。

子要素フィルター

子要素に対するフィルターを紹介します。

:nth-child(n)

各親要素に対してn番目の子要素を抽出
$(“:nth-child(n)“)
引数nは複数の指定方法があります

各親要素に対してn番目の子要素を抽出します。
引数には下記のようなものが指定できます。

  • :nth-child(2) → 2番目を取得
  • :nth-child(even) → 偶数を取得
  • :nth-child(odd) → 奇数を取得
  • :nth-child(3n) → 3個おきに取得
  • :nth-child(3n+1) → 1番目から3個おきに取得

:nth-childでは:eq()のように0からではなく1から始まる番号を使用します。
サンプルで確認してみましょう。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	$("ul li:nth-child(2)").css("color", "red");
});
</script>
 
<!-- HTML -->
<ul>
	<li>リスト1-1</li>
	<li>リスト1-2</li>
	<li>リスト1-3</li>
</ul>

<ul>
	<li>リスト2-1</li>
	<li>リスト2-2</li>
	<li>リスト2-3</li>
	<li>リスト2-4</li>
</ul>

  • リスト1-1
  • リスト1-2
  • リスト1-3
  • リスト2-1
  • リスト2-2
  • リスト2-3
  • リスト2-4

:nth-child(2)は各ul要素の2番目のli要素を選択します。
一方、:eq(2)は全体のul要素の中のli要素の3番目を選択します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	$("ul li:eq(2)").css("color", "red");
});
</script>
 
<!-- HTML -->
<ul>
	<li>リスト1-1</li>
	<li>リスト1-2</li>
	<li>リスト1-3</li>
</ul>

<ul>
	<li>リスト2-1</li>
	<li>リスト2-2</li>
	<li>リスト2-3</li>
	<li>リスト2-4</li>
</ul>

  • リスト1-1
  • リスト1-2
  • リスト1-3
  • リスト2-1
  • リスト2-2
  • リスト2-3
  • リスト2-4

その他の番号の指定方法の例です。
n個おきの指定などもできます。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// 偶数番目は赤色
	$("ul li:nth-child(even)").css("color", "red");
	// 奇数番目は青色
	$("ul li:nth-child(odd)").css("color", "blue");
	// 3個おきに背景を灰色
	$("ul li:nth-child(3n)").css("background", "#ccc");
	// 1番目から3個おきに緑のボーダーをつける
	$("ul li:nth-child(3n+1)").css("border", "1px solid green");
});
</script>
 
<!-- HTML -->
<ul>
	<li>リスト1-1</li>
	<li>リスト1-2</li>
	<li>リスト1-3</li>
	<li>リスト1-4</li>
	<li>リスト1-5</li>
	<li>リスト1-6</li>
</ul>

  • リスト1-1
  • リスト1-2
  • リスト1-3
  • リスト1-4
  • リスト1-5
  • リスト1-6

:first-child

各親要素の最初の子要素を選択
$(“:first-child“)

:firstセレクターは全体の要素のうちの最初を選択するのに対し、:first-childは親要素ごとに最初の要素を選択します。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	// 偶数番目は赤色
	$("ul li:first-child").css("color", "red");
});
</script>
 
<!-- HTML -->
<ul>
	<li>リスト1-1</li>
	<li>リスト1-2</li>
	<li>リスト1-3</li>
</ul>

<ul>
	<li>リスト2-1</li>
	<li>リスト2-2</li>
	<li>リスト2-3</li>
	<li>リスト2-4</li>
</ul>

  • リスト1-1
  • リスト1-2
  • リスト1-3
  • リスト2-1
  • リスト2-2
  • リスト2-3
  • リスト2-4

:last-child

各親要素の最後の子要素を選択
$(“:last-child“)

:first-childセレクターが最初の子要素を選択するのに対し、:last-childセレクターは最後の子要素を選択します。

:only-child

各親要素が1つだけ子要素を持つ場合に、その子要素を選択
$(“:only-child“)

各親要素が1つだけ子要素を持つ場合に、その子要素を選択します。
この場合の子要素にはテキストノードは含まれません。

表示・非表示フィルター

表示・非表示の要素を選択していきます。

:hidden

非表示になっている要素を選択
$(“:hidden“)

非表示になっている要素を選択を選択します。
非表示とは下記の条件を含みます。

  • CSSでdisplay:none;を設定している要素
  • jQueryメソッドのslideUpやfadeOutを使用して非表示になった要素
  • inputタグがtype=”hidden”の要素

単独で使用すると、すべての非表示要素を選択してしまいますので、階層セレクターなどを利用して条件を限定して利用するのが多いです。

:visible

表示されている要素を選択
$(“:visible“)

表示されている要素を選択します。
表示とは下記の条件を含みます。

  • CSSでvisibility:hidden;を設定している要素
  • CSSでopacity:0;を設定している要素

display:none;とvisibility:hidden;の違いは要素自体のスペースを画面上に残るかどうかです。
要素自体のスペースがあるものに関しては:visibleでは表示されていると判断されます。
下記にサンプルプログラムがありますので、参考にしてみてください。

<!-- Script -->
<script>
jQuery(document).ready(function($){
	$("button").click(function(){
		// display:none;とvisibility:hidden;のどちらが選択されても表示されるようにCSSを設定しています
		$(":visible").css({
			"display":"block",
			"visibility":"visible"
		});
	})
});
</script>
 
<!-- HTML -->
<button>Click!</button>

<div style="border:1px solid blue">
	<div style="display:none;">
		display:none;を設定しています
	</div>
</div>
<div style="border:1px solid red">
	<div style="visibility:hidden;">
		visibility:hidden;を設定しています
	</div>
</div>

関連記事一覧

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

CAPTCHA