セレクターをフィルタする(jQuery)
セレクターで絞ったあと、さらにフィルタすることができます。フィルタ方法には、基本フィルタ、コンテンツフィルタ、属性フィルタ、フォームフィルタがあります。
基本フィルタ
最初の要素、偶数番目の要素など、特定の条件でセレクターをフィルタします。
//一番最初の要素 $("p:first") //一番最後の要素 $("p:last") //指定セレクター以外の要素 $("p.not(div)") //偶数番目の要素 $("p:even") //奇数番目の要素 $("p:odd") //指定番目の要素 $("p:eq(2)") //指定番目より大きい要素 $("p:gt(2)") //指定番目より小さい要素 $("p:lt(2)") //見出し要素 $("p:header") //アニメーション実行中の要素 $("p:animated") //指定番目の子要素 $("p:nth-child(2)") //最初の子要素 $("p:first-child") //最後の子要素 $("p:last-child") //1つしかない子要素 $("p:only-child") |
コンテンツフィルタ
指定文字を含む、子要素の有無など、コンテンツの状態でセレクターをフィルタします。
//指定した文字列を含む要素 $("p:contains(検索する文字)") //子要素をもつ要素 $("p:parent") //子要素をもたない要素 $("p:empty") //指定セレクターの子要素を持つ要素 $("p:has(div)") |
属性フィルタ
HTML要素の属性値を検索してセレクターをフィルタします。
//指定した属性をもつ要素 $("input[value]") //指定した属性値が等しい要素 $("input[value='value1']") //指定した属性値が異なる要素 $("input[value!='value1']") //指定した属性値で始まる要素 $("input[value^='v']") //指定した属性値で終わる要素 $("input[value$='1']") //指定した属性値を含む要素 $("input[value*='a']") |
フォームフィルタ
input要素、type属性をもとにフォーム要素でセレクターをフィルタします。
//input要素、select要素、button要素、textarea要素 $("input:input") //type属性がtextの要素 $("input:text") //type属性がpasswordの要素 $("input:password") //type属性がradioの要素 $("input:radio") //type属性がcheckboxの要素 $("input:checkbox") //type属性がfileの要素 $("input:file") //type属性がhiddenの要素 $("input:hidden") //type属性がimageの要素 $("input:image") //type属性がbuttonの要素 $("input:button") //type属性がsubmitの要素 $("input:submit") //利用可能な要素 $("input:enabled") //利用不可能な要素 $("input:disabled") //チェックされている要素 $("input:checked") //選択されている要素 $("input:selected") |
関連する内容
Javascriptの基本