THE HAM MEDIA BLOG

jQuer基礎:チャイルドフィルターを学ぶ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
DOM
javascript
jquery

チャイルドフィルターを学ぶ

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

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



Child Filters

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

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

それぞれ試してみる

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

プレビュー

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

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

◎デモ(下記の名前はクラスの名前になってます)

  • ・リストA 1番目
  • ・リストA 2番目
  • ・リストA 3番目
  • ・リストA 4番目
  • ・リストB 1番目
  • ・リストC 1番目
  • ・リストC 2番目
  • ・リストC 3番目
  • ・リストC 4番目
  • ・リストC 5番目

デモ部分のHTMLソース

<ul class="filtersPreview">
<li>・リストA 1番目</li>
<li>・リストA 2番目</li>
<li>・リストA 3番目</li>
<li>・リストA 4番目</li>
</ul>
<ul class="filtersPreview">
<li>・リストB 1番目</li>
</ul>
<ul class="filtersPreview">
<li>・リストC 1番目</li>
<li>・リストC 2番目</li>
<li>・リストC 3番目</li>
<li>・リストC 4番目</li>
<li>・リストC 5番目</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()に関してはどうやら1から始まっているようだ。
:nth-child(2)の時も、きちんと2番目の要素に適応されていますからね。
これは今後使う時に注意しておかねば!



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。