SEEDS Creator's Blog

読者です 読者をやめる 読者になる 読者になる

要素の選択について Vol.2

光陰矢の如しとはよく言ったもので、気づけばもう3月...そう”弥生”です。 普段の生活の中で、各月の別名を使うことは少ないと思いますが、皆さん知っておられますか? 自分はこういうの得意です!任せてください! では、1月から... あれ...? えーっと... あー... あ!  正月!

さて、気を取り直して、前回の記事に引き続いてjQueryでの要素の選択について書きます。 指定方法は多々ありますので、今回も自分の思うところの指定方法を抜粋して、記事にします。

フィルタを用いたセレクタ指定方法

フィルタと呼ばれる、要素の状態などを判断して指定が行なえます。

<ul class="hoge">
    <li>テキスト1</li>
    <li>テキスト2</li>
    <li>テキスト3</li>
</ul>
<ul>
    <li>テキスト4</li>
    <li>テキスト5</li>
    <li>テキスト6</li>
</ul>

上記のようなコードがあるとして説明していきます。

順序などによるフィルタ

:first :last

最初、最後の指定ができます。

$("ul.hoge li:first").css("color", "#f00")

上記指定で、リスト内の最初の要素(テキスト1)の文字色が赤色になります。

$("ul.hoge li:last").css("color", "#00f")

上記指定で、リスト内の最期の要素(テキスト3)の文字色が青色になります。

:first-child :last-child

"first"、"last"に似た指定方法で":first-child"、":last-child"というのもあります。

$("li:first-child").css("color", "#f00")

上記指定で、"各リスト内"の最初の要素(テキスト1とテキスト4)の文字色が赤色になります。

$("li:last-child").css("color", "#00f")

上記指定で、"各リスト内"の最期の要素(テキスト3とテキスト6)の文字色が青色になります。

:even :odd

偶数、奇数を指定できます。

$("li:even").css("color", "#00f")

上記指定で、リスト内の偶数番目の要素(テキスト2)の文字色が青色になります。

$("li:odd").css("color", "#f00")

上記指定で、リスト内の奇数番目の要素(テキスト1とテキスト3)の文字色が赤色になります。

:eq(n)

n番目を指定できます。 注意点として、nは0から始まる番号です。

$("li:eq(2)").css("color", "#f00")

上記指定で、リスト内の3番目の要素(テキスト3)の文字色が赤色になります。

:lt(n)

n番目より前を指定できます。

$("li:lt(3)").css("color", "#f00")

上記指定で、リスト内の3番目より前の要素(テキスト1とテキスト2)の文字色が赤色になります。

:gt(n)

n番目より後を指定できます。

$("li:gt(1)").css("color", "#00f")

上記指定で、リスト内の1番目より後の要素(テキスト2とテキスト3)の文字色が青色になります。

:nth-child(n)

n番目を指定できます。 なお n には番号だけでなく、数式などでも指定可能です。 また、:nth-childでは1から始まる番号になります。

$("li:nth-child(2n+1)").css("color", "#f00")

上記指定で、リスト内の1、3、5...番目の要素(テキスト1とテキスト3)の文字色が赤色になります。

状態などによるフィルタ

:animated

アニメーションしている要素の指定ができます。

$("div:animated").css("background", "#f00")

上記指定で、アニメーションしている要素の背景色が赤色になります。

:visible :hidden

表示、非表示を判断し、要素の指定ができます。

$("div:visible").css("background", "#f00")

上記指定で、表示されている要素の背景色が赤色になります。

$("div:hidden").show()

上記指定で、非表示の要素が表示されます。 ※inputのtype="hidden"の要素も対象です。

:enabled :disabled

利用可能、不可能を判断し、要素の指定ができます。

$("input:enabled").val("YES");

上記指定で、利用可能な要素の値を"YES"に変更します。

$("input:disabled").val("NO");

上記指定で、利用不可能な要素の値を"NO"に変更します。

まとめ

前回と同じくですが、セレクタの指定方法は多々あり、フィルタを用いたセレクタ指定方法を網羅しているわけではありません。 他に、":checked"、":selected"などフォーム周りで使えそうな選択状態の要素を指定する方法などもあるようです。 jQueryの本家サイトや日本語翻訳サイトもありますので、さらに詳しくお知りになりたい場合は、そちらをご覧下さい。

後述

記事とは関係ありませんが、冒頭の月の別名については...

  • 1月 - 睦月
  • 2月 - 如月
  • 3月 - 弥生
  • 4月 - 卯月
  • 5月 - 皐月
  • 6月 - 水無月
  • 7月 - 文月
  • 8月 - 葉月
  • 9月 - 長月
  • 10月 - 神無月
  • 11月 - 霜月
  • 12月 - 師走

でした。 恥ずかしくないようちゃんと覚えておこうと思います。