THE HAM MEDIA BLOG

「jQuer基礎：ベーシックフィルターを学ぶ」
「jQuer基礎：コンテンツフィルターを学ぶ」
現在jQueryのフィルターについて２つのことを勉強ついでにエントリーしましたが、
今回はアトリビュートフィルターを勉強してみようと思う。

タグ内のnameとかclassとかidの名前が●●●の時に適応・・・
というようなフィルターの勉強です！

Attribute Filters

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

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

• ■[attribute]
• ■[attribute=value]
• ■[attribute!=value]
• ■[attribute^=value]
• ■[attribute$=value]
• ■[attribute*=value]
• ■[selector1][selector2][selectorN]

今回のはどれも想像がつく。
あとは使い方と動作のしかたくらいだろう。

今回もためしてみるとしよう。

それぞれ試してみる

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

プレビュー

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

デモ部分のHTMLソース

<ul class="filtersPreview">
<li class="attribute">・attribute</li>
<li class="attribute">・attribute</li>
<li class="attributes">・attributes</li>
<li class="attribut">・attribut</li>
<li class="filters">・filters</li>
<li class="filter">・filter</li>
<li class="fil">・fil</li>
<li>・no class（クラス無し）</li>
</ul>

今回はちょっと進歩

[attribute]のattribute部分をclassにしてみました。
あとはオレンジの文字で説明している通りです。

で、何が進歩かっていうと、毎回デモを作るときは
jQueryを使ってプログラムを少し作るのですが、
配列とかループとか使って今回のをつくっちゃいました。

いつもは自分のプログラムを紹介するのが恥ずかしくて、
ソースをみたらわかるようにはしていましたが、
参考として載せることをしていませんでした。

今回はちょっと勉強したぞってことで、
載せておきたいと思います。

$(document).ready(function(){
	$("ul.contents-filters a").click(function(){
	    
	    Attributes = new Array(
	       "class", "class='attribute'", 
	       "class!='attribute'", "class^='fil'", 
	       "class$='s'", "class*='te'", "class*='fil'][class$='s'");
		
		$("ul.filtersPreview li").css("background-color","#fff");
		
		var filterNum = this.id;
		
		for (i = 0; i < 7; i++) {
		  if(filterNum == "afilter"+ i ){ var filter = Attributes[i]};
		};
		
		var changeFilter = "ul.filtersPreview li["+filter+"]";
		
		$(changeFilter).css("background-color","#ccccff");
		
		$("p#preview-info")
		  .html("適応されているフィルターは「:" + filter + "」です。");
		
		return true;
	});
});

もっとこう作ったらいいのに！ってのは、たぶんまだまだ多いですが、
少しずつでも進歩していけたらなって思っています。