THE HAM MEDIA BLOG

「jQuer基礎：ベーシックフィルターを学ぶ」
「jQuer基礎：コンテンツフィルターを学ぶ」
「jQuer基礎：アトリビュートフィルターを学ぶ」
と、既に３回もjQueryのフィルターについてをお勉強しておりましたが、
今回はチャイルドフィルターをお勉強しよう。

今回のは感覚的にもすぐにわかるようなものかと思います。

Child Filters

いつものようにとりあえずどんなのがあるのかチェックしてみよう。
「API/1.2/Selectors - jQuery JavaScript Library」

※以下それぞれの説明ページへのリンクになっています

• ■:nth-child(index/even/odd/equation)
• ■:first-child
• ■:last-child
• ■:only-child

それぞれ試してみる

それぞれのソースは先ほどの一覧がリンクになっているので、
そこからとんで参照してみてください。

プレビュー

今回のサンプルもリストでつくってみました。

それぞれをクリックするとデモ部分でプレビューされます。

デモ部分のHTMLソース

<ul class="filtersPreview">
<li>・リストA　１番目</li>
<li>・リストA　２番目</li>
<li>・リストA　３番目</li>
<li>・リストA　４番目</li>
</ul>
<ul class="filtersPreview">
<li>・リストB　１番目</li>
</ul>
<ul class="filtersPreview">
<li>・リストC　１番目</li>
<li>・リストC　２番目</li>
<li>・リストC　３番目</li>
<li>・リストC　４番目</li>
<li>・リストC　５番目</li>
</ul>

今回用いたサンプルソース

$(document).ready(function(){

	$("ul.child-filters a").click(function(){
	    Child = new Array(
	       ":nth-child(2)", ":nth-child(even)", 
	       ":nth-child(odd)", ":nth-child(4n)", 
	       ":first-child", ":last-child", ":only-child");

		$("ul.filtersPreview li").css("background-color","#fff");

		var filterNum = this.id;

		for (i = 0; i < 7; i++) {
		  if(filterNum == "cfilter"+ i ){ var filter = Child[i]};
		};

		var changeFilter = "ul.filtersPreview li"+filter;

		$(changeFilter).css("background-color","#ccccff");

		$("p#preview-info")
		  .html("適応されているフィルターは「" + filter + "」です。");
		return true;
	});
});

:evenと:nth-child(even)、:oddと:nth-child(odd)

あれ？作っている最中に気づいたのですが、
jQuer基礎：ベーシックフィルターを学ぶの時の
:evenと:oddとの動作がなんか違う。
前のは、0番目からカウントが始まっていたのに対して、
今回の:nth-child()に関してはどうやら１から始まっているようだ。
:nth-child(2)の時も、きちんと２番目の要素に適応されていますからね。
これは今後使う時に注意しておかねば！