光陰矢の如しとはよく言ったもので、気づけばもう3月…そう”弥生”です。
普段の生活の中で、各月の別名を使うことは少ないと思いますが、皆さん知っておられますか？
自分はこういうの得意です！任せてください！
では、1月から…
あれ…？ えーっと… あー… あ！ 正月！
さて、気を取り直して、前回の記事に引き続いてjQueryでの要素の選択について書きます。
指定方法は多々ありますので、今回も自分の思うところの指定方法を抜粋して、記事にします。
フィルタを用いたセレクタ指定方法
フィルタと呼ばれる、要素の状態などを判断して指定が行なえます。
1<ul class="hoge">
2<li>テキスト１</li>
3<li>テキスト２</li>
4<li>テキスト３</li>
5</ul>
6<ul>
7<li>テキスト４</li>
8<li>テキスト５</li>
9<li>テキスト６</li>
10</ul>
11上記のようなコードがあるとして説明していきます。
順序などによるフィルタ
:first :last
最初、最後の指定ができます。
1$("ul.hoge li:first").css("color", "#f00")
2上記指定で、リスト内の最初の要素(テキスト１)の文字色が赤色になります。
1$("ul.hoge li:last").css("color", "#00f")
2上記指定で、リスト内の最期の要素(テキスト３)の文字色が青色になります。
:first-child :last-child
“first”、”last”に似た指定方法で”:first-child”、”:last-child”というのもあります。
1$("li:first-child").css("color", "#f00")
2上記指定で、”各リスト内”の最初の要素(テキスト１とテキスト４)の文字色が赤色になります。
1$("li:last-child").css("color", "#00f")
2上記指定で、”各リスト内”の最期の要素(テキスト３とテキスト６)の文字色が青色になります。
:even :odd
偶数、奇数を指定できます。
1$("li:even").css("color", "#00f")
2上記指定で、リスト内の偶数番目の要素(テキスト２)の文字色が青色になります。
1$("li:odd").css("color", "#f00")
2上記指定で、リスト内の奇数番目の要素(テキスト１とテキスト３)の文字色が赤色になります。
:eq(n)
n番目を指定できます。
注意点として、nは０から始まる番号です。
1$("li:eq(2)").css("color", "#f00")
2上記指定で、リスト内の３番目の要素(テキスト３)の文字色が赤色になります。
:lt(n)
n番目より前を指定できます。
1$("li:lt(3)").css("color", "#f00")
2上記指定で、リスト内の３番目より前の要素(テキスト１とテキスト２)の文字色が赤色になります。
:gt(n)
n番目より後を指定できます。
1$("li:gt(1)").css("color", "#00f")
2上記指定で、リスト内の１番目より後の要素(テキスト２とテキスト３)の文字色が青色になります。
:nth-child(n)
n番目を指定できます。
なお n には番号だけでなく、数式などでも指定可能です。
また、:nth-childでは1から始まる番号になります。
1$("li:nth-child(2n+1)").css("color", "#f00")
2上記指定で、リスト内の1、3、5…番目の要素(テキスト１とテキスト３)の文字色が赤色になります。
状態などによるフィルタ
:animated
アニメーションしている要素の指定ができます。
1$("div:animated").css("background", "#f00")
2上記指定で、アニメーションしている要素の背景色が赤色になります。
:visible :hidden
表示、非表示を判断し、要素の指定ができます。
1$("div:visible").css("background", "#f00")
2上記指定で、表示されている要素の背景色が赤色になります。
1$("div:hidden").show()
2上記指定で、非表示の要素が表示されます。
※inputのtype=”hidden”の要素も対象です。
:enabled :disabled
利用可能、不可能を判断し、要素の指定ができます。
1$("input:enabled").val("YES");
2上記指定で、利用可能な要素の値を”YES”に変更します。
1$("input:disabled").val("NO");
2上記指定で、利用不可能な要素の値を”NO”に変更します。
まとめ
前回と同じくですが、セレクタの指定方法は多々あり、フィルタを用いたセレクタ指定方法を網羅しているわけではありません。
他に、”:checked”、”:selected”などフォーム周りで使えそうな選択状態の要素を指定する方法などもあるようです。
jQueryの本家サイトや日本語翻訳サイトもありますので、さらに詳しくお知りになりたい場合は、そちらをご覧下さい。
後述
記事とは関係ありませんが、冒頭の月の別名については…
- １月 – 睦月
- ２月 – 如月
- ３月 – 弥生
- ４月 – 卯月
- ５月 – 皐月
- ６月 – 水無月
- ７月 – 文月
- ８月 – 葉月
- ９月 – 長月
- １０月 – 神無月
- １１月 – 霜月
- １２月 – 師走
でした。
恥ずかしくないようちゃんと覚えておこうと思います。