jQueryのフィルターが便利なんですが、
なかなか全部把握出来ないので自分用
にまとめることにしました。マイチート
みたいな記事です。フィルターはかゆい
ところに手が届く便利なもので、場合
によってはコードも短く済ませること
も出来るかもしれません。
というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。
しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。
カテゴリごとにjsfiddleで全サンプルを用意してありますのでフォークしてご自身向けに変更して頂ければと思います。
Basic Filter(基本フィルタ)
Sample
基本フィルタの全サンプルです。フィルタの説明はjavascriptのコード内のコメントアウトでしています。フォークは一番右の+ボタンから。
以下解説です。
animated
アニメーションしてる要素だけを取得できる
//:animatedでアニメーションしてる要素にだけclass="colored"を加える$("div:animated").toggleClass("colored"); |
eq()
集合している要素から、～番目指定で単一エレメントを取得できる。
//ul liの3番目だけ色を赤くする$("ul#ep li:eq(2)").css("color", "red"); |
※1つ目は0と数えますので「eq(2)」と書いた場合は3つ目です。
even
集合している要素から、(0から数えて)偶数行のみ取得できる。
//ul liの偶数行だけ赤くする$("ul#even li:even").css("color", "red"); |
※1つ目は0なので3つ目が「2」扱い（偶数）
odd
集合している要素から、(0から数えて)奇数行のみ取得できる。
//ul liの奇数行だけ赤くする$("ul#odd li:odd").css("color", "red"); |
first
集合している要素の最初だけ取得できる
//ul liの最初だけ赤くする$("ul#first li:first").css("color", "red"); |
last
集合している要素の最後だけ取得できる
//ul liの最後だけ赤くする$("ul#last li:last").css("color", "red"); |
gt()
集合している要素から、～番目の後を全て取得できる
//ul liの3番目より後の色を全て赤くする$("ul#gt li:gt(2)").css("color", "red"); |
lt()
集合している要素から、～番目より前を全て取得できる
//ul liの3番目より前の色を全て赤くする$("ul#lt li:lt(2)").css("color", "red"); |
header
見出し要素(h1～h6)を全て取得する
//ul内の見出し(h1～h6)を全て赤くする$("ul#header :header").css("color", "red"); |
※cssで!important指定した場合はそちら優先
not()
セレクタに一致した要素内で、:not(.red)というセレクタに一致する要素以外を取得
//ul liのうちの、class="red"に一致する要素以外を赤くする$("ul#not li:not(.red)").css("color", "red"); |
focus
現在フォーカス中の要素を取得する
//focus のinput要素で現在フォーカスされている要素を選択 $('form#focus *:input').bind( 'focus blur', function(){ var item = $(this); setTimeout(function(){ item.toggleClass('focused', item .is(':focus')); },0); }); |
Child Filter(子要素フィルタ)
Sample
子要素フィルタの全サンプルです。cssでもお馴染みのものがありますね。同じ感覚でクロスブラウザに対応できる、と考えて頂けると分かりやすいでしょうか・・
first-child
集合している要素内で、親要素ごとの最初の子要素を全て取得できる
//ul liのうちの、親要素毎の最初のliを赤くする $("ul.first li:first-child").css("color", "red"); |
※firstが「要素全体の最初だけ」に対してfirst-childは「親要素ごとの最初の子要素」を取得する
last-child
集合している要素内で、親要素ごとの最後の子要素を全て取得できる
//ul liのうちの、親要素毎の最初のliを赤くする $("ul.last li:last-child").css("color", "red"); |
※lastが「要素全体の最初だけ」に対してlast-childは「親要素ごとの最初の子要素」を取得する
nth-child()
集合している要素内で、親要素ごとの(n)番目の子要素を全て取得できる
//ul liのうちの、親要素毎の最初のliを赤くする $("ul.nth li:nth-child(3)").css("color", "red"); |
※eqが「要素全体のn番目だけ」に対してnth-childは「親要素ごとの最初の子要素」を取得する
※nth-childは、()内の数字が0からではなく、1から始まる（ややこしいわ！）
※偶数、奇数や～個飛ばし、などの細かい指定も出来る
※「英語のまま考えればいい」と教わりました。なるほどｗウホッってなりました。ありがとうございます:D
only-child
集合している要素内で、親要素ごとの唯一の子要素(例ではspanのある子要素のみ)を全て取得できる
//ul liのうちの、spanのあるliを赤くする $("ul.only li span:only-child").css("color", "red"); |
Content Filter(コンテンツフィルタ)
Sample
コンテンツフィルタの全サンプルです。特定の文字列を含んだ要素を取得できる、などなど細かい指令を可能にしてくれます。
:contains()
引数で渡された文字列を含む要素を取得できる
//ul liの「red」というテキストを含む要素赤くする $("ul.contains li:contains('red')").css("color", "red"); |
:empty
要素が空のものを取得できる
//ul liで要素が空のものに「無いです！」というテキストを加えて赤くする $("ul.empty li:empty").text("無いです!").css("color", "red"); |
:has()
指定したセレクタ（例ではspan）を子要素に持つものを取得できる
//ul liでspanを持ったものだけ赤くする $("ul.has li:has(span)").css("color", "red"); |
:parent
指定した親要素を持った子要素で空ではないものを取得できる
//ul liを親に持つspanを赤くする $("ul.parent li span:parent").css("color", "red"); |
※これは僕の例が分かりにくいですね・・・少しややしいですが、color:red;はspanにかかります。
※:emptyの逆と考える
※【追記】「他の要素を持つspan要素」あるいは「空ではないspan要素」を選択する、と書いたほうがいいとコメントで教えてもらいました！有難うございます
Attribute(属性フィルタ)
一応補足ですが、属性ってのはidとかclassとかrelとかtitleとかnameとかそんなんです。
書き方で少し注意点といいますか・・引用符に関して。
$(“ul li[class=’sub01′]”)
このように引用符はシングルとダブルを別途使います。これは逆でも結構です。
$(“ul li[class=\”sub01\”]”)
両方使いたい場合は上記のようにエスケープする必要がありますので注意してください。
Sample
属性フィルタの全サンプルです。良くあるツールチップなんかも属性フィルタでnameやtitleを取得して表示させたりしてます。cssが得意な方はピンとくるのでは無いでしょうか。
マークアップは最後の以外は全て共通です。
<ul class="attribute-n"> <li>list0</li> <li class="eg-01 sub03">list1</li> <li>list2</li> <li class="eg-02 sub04">list3</li></ul> |
全部このマークアップで属性フィルタのみで取得する要素を変えています。また、ここではclass属性を例にして見出し等を書いてます。
あと、画像はハイフン入れ忘れてたりしますが、サンプルは全部入ってます。
[class]
指定した属性を持つ要素を取得できる
//ul liでclassを持った要素だけ赤くする $("ul.attribute-01 li[class]").css("color", "red"); |
[class=”value”]
指定した、特定の属性を持つ要素を取得できる
//ul liでclass='eg-02 sub04'を持った要素だけ赤くする $("ul.attribute-02 li[class='eg-02 sub04']").css("color", "red"); |
※class=’eg-02’だけでは取得出来ない
[class!=”value”]
指定した、特定の属性を持つ要素以外を取得できる
//ul liでclass='eg-01'を持った要素以外を赤くする $("ul.attribute-03 li[class!='eg-01 sub03']").css("color", "red"); |
※属性の後に!を付けるとデフォルトと逆の意味になる
※class=’eg-01’だけでは取得出来ない
[class^=”value”]
指定した、属性が特定の文字列で始まる要素を取得できる
//ul liでclass名がegで始まる要素を赤くする $("ul.attribute-04 li[class^='eg']").css("color", "red"); |
[class$=”value”]
指定した、属性が特定の文字列で終わる要素を取得できる
//ul liでclass名が04で終わる要素を赤くする $("ul.attribute-05 li[class$='04']").css("color", "red"); |
※class=’sub04 eg-02’の場合は取得出来ない
[class*=”value”]
指定した、属性が特定の文字列を含む要素を取得できる
//ul liでclass名にg-0が含まれる要素を赤くする $("ul.attribute-06 li[class*='g-0']").css("color", "red"); |
[class~=”value”]
指定した、属性名を含む要素を取得できる
//ul liでclass名にsub04が含まれる要素を赤くする $("ul.attribute-07 li[class~='sub04']").css("color", "red"); |
※class=’eg-02 sub04’でも取得出来る
[class|=”value”]
指定した、属性名とマッチするか、後にハイフンが続く要素を取得できる
//ul liでclass名がegまたはeg-**を含む要素を赤くする $("ul.attribute-08 li[class|='eg']").css("color", "red"); |
※class=’eg-02 sub04’は取得出来る
※class=’eg sub04’は取得出来る
※class=’eg02 sub04’は取得出来ない
[name=”value”][name2=”value2″]
指定した、複数の属性名を全て含んだもののみ取得する
//ul liでclass='eg-02 sub04で、idも含んでいる要素を赤くする $("ul.attribute-09 li[class='eg-02 sub04'][id]").css("color", "red"); |
※これだけclass=’eg-02 sub04’のli要素にidを含めています
対応してる属性の一覧みたいなの欲しいです。全部対応してるのかな？
Form(フォーム)
Sample
フォームの全サンプルです。かなりウザい感じになってますのでフォークしてご自身向けに変えてくださいｗ
spanでラップしてます。単純なフィルタばかりですので画像はなしでいいでしょうか。
:input
input要素を全て取得できる
//input要素の背景を黄色にする$("#input :input").wrap('<span></span>').parent().css("background", "yellow"); |
:button
button要素を全て取得できる
//button要素の背景を黄色にする$("#button :button").wrap('<span></span>').parent().css("background", "yellow"); |
:checkbox
checkbox要素を全て取得できる
//checkbox要素の背景を黄色にする$("#checkbox :checkbox").wrap('<span></span>').parent().css("background", "yellow"); |
:checked
checked=”checked”の含まれたtype=”checkboxを取得できる
//最初からチェックが入っているcheckbox要素の背景を黄色にする$("#checked :checked").wrap('<span></span>').parent().css("background", "yellow"); |
:disabled
disabled=”disabled”の含まれた要素を取得する
//disabled="disabled"で選択不能になっている要素の背景を黄色にする$("#disabled :disabled").wrap('<span></span>').parent().css("background", "yellow"); |
:enabled
disabled=”disabled”の含まれた要素以外を取得する
//disabled="disabled"で選択不能になっていない要素の背景を黄色にする$("#enabled :enabled").wrap('<span></span>').parent().css("background", "yellow"); |
:file
type=”file”のinput要素を取得する
//type="file"のinput要素の背景を黄色にする$("#file :file").wrap('<span></span>').parent().css("background", "yellow"); |
:image
type=”image”のinput要素を取得する
//type="image"のinput要素の背景を黄色にする$("#image :image").wrap('<span></span>').parent().css("background", "yellow"); |
:password
type=”password”のinput要素を取得する
//type="password"のinput要素の背景を黄色にする$("#password :password").wrap('<span></span>').parent().css("background", "yellow"); |
:radio
type=”radio”のinput要素を取得する
//type="radio"のinput要素の背景を黄色にする$("#radio :radio").wrap('<span></span>').parent().css("background", "yellow"); |
:reset
type=”reset”のinput要素を取得する
//type="reset"のinput要素の背景を黄色にする$("#reset :reset").wrap('<span></span>').parent().css("background", "yellow"); |
:selected
selected=”selected”の付いたselect要素を取得する
// selected="selected"の付いたselect要素の背景を黄色にする$("#selected option:selected").css("background", "yellow"); |
:submit
type=”submit”のinput要素を取得する
//type="submit"のinput要素の背景を黄色にする$("#submit input:submit").wrap('<span></span>').parent().css("background", "yellow"); |
※input:submitではなく、:submitのみだとbutton要素も含まれる・・？
:text
text要素を取得する
//text要素の背景を黄色にする$("#text :text").css("background", "yellow"); |
Visibility Filter(可視フィルタ)
Sample
可視フィルタの全サンプルです。2つしかないけど。
:hidden
非表示の要素を取得出来る
//非表示になっているものを全て表示する$(".hiddenbutton").click(function(){ $("ul li:hidden").show(); }); |
:visible
表示されている要素を取得出来る
//表示されているものを非表示にする$(".visiblebutton").click(function(){ $("ul.visible li").hide(); }); |
以上、とっても便利なjQueryのフィルター一覧でした。これらを覚えればCSS3を簡単にクロスブラウザに対応させられたりしますのでいろいろ試してみてください。
これは一応ただの基本で、さらにセレクタなども組み合わせていくといろいろ出来るようになってjQueryが楽しくなります。ハムメディアさんも以前いろいろ試されてました。こういうので発見があったりして結構楽しいです。
まだまだ勉強中なのでお詳しい方、間違い等ありましたらお手数ですがご指摘頂ければ幸いです。
