• javascript
• まとめ
• プログラミング

【jQuery】要素を指定するセレクタの使い方 まとめ

by FUKUSHIMA

• ツイート
• 

jQueryを使って特定の要素を指定する際にセレクタを使いますが，指定方法を間違ったりすると，余計な要素まで取得してしまったり，要素そのものを間違えてしまったりします．
今回は備忘録も兼ねて，セレクタで要素を指定するパターンを挙げ，どの要素が指定されるのかを解説していきます.

目次

• セレクタとは
• 要素を指定する方法(基本)
• フィルターを使った指定方法
• 属性フィルターを使った指定方法
• その他よく使う指定方法
• まとめ

セレクタとは

セレクタはjQueryを記述する際の$()の中のことを指します．

$("#contents").css(...

のように記述し，操作したい要素を指定するために使用します．

要素を指定する方法(基本)

まず，基本的な要素の指定方法を紹介します．

すべての要素を指定する

$("*")

要素名を指定して要素を指定する

指定した要素全てに反映される．

$("要素名")

id名から要素を指定する

idはユニークなため，反映されるのは一つの要素となる．

$("#id名")

クラス名から要素を指定する

クラス名に一致する要素に反映される．

$(".class名")

要素名もしくはid名に一致する要素を指定する

$("要素名,#id名")

id名内の配下にある要素を指定する

検索対象は#id名内全ての要素

$("#id名 要素名")

id名直下のa要素を指定する

検索対象は直下のa要素のみ

$("#id名 > 要素名")

要素名Aの次に現れる要素名Bを指定する

$("要素名A + 要素名B")

要素名Aの以降に現れる要素名Bの全てを指定する

$("要素名A ~ 要素名B")

フィルターを使った指定方法

要素セット全体から，要素名A直下の要素名Bで最初の要素を取り出す

$("要素名A > 要素名B:first")

要素セット全体から，要素名A直下の要素名B最後の要素を取り出す

$("要素名A > 要素名B:last")

親要素を起点とし，要素名A直下の要素名B最初の要素を取り出す

$("要素名A > 要素名B:first-child")

親要素を起点とし，要素名A直下の要素名B最後の要素を取り出す

$("要素名A > 要素名B:last-child")

上記の違いは，以下のサンプルを見てください．
それぞれの指定方法で,最初と最後の要素の文字色を変更しています．

• リスト1テキスト1
• リスト1テキスト2
• リスト1テキスト3

• リスト2テキスト1
• リスト2テキスト2
• リスト2テキスト3

このように，取得した要素の中から最初と最後の要素を取り出す場合と，親要素を起点にそれぞれの最初と最後の要素を取り出す場合に分けられます．

要素名A内の要素名Bで偶数番目の要素を取り出す

$("要素名A 要素名B:even")

要素名A内の要素名Bで奇数番目の要素を取り出す

$("要素名A 要素名B:odd") 

要素名A直下の要素名Bでn番目の要素を取り出す

$(" 要素名A > 要素名B:eq(n)")

要素名A直下の要素名Bでn番目以前の要素すべて(n番目の要素は含まず)を取り出す

$(" 要素名A > 要素名B:lt(n)")

要素名A直下の要素名Bでn番目以降の要素すべて(n番目の要素は含まず)を取り出す

$(" 要素名A > 要素名B:gt(n")

textという文字列を含む要素(大文字小文字の区別あり)を取り出す

$(" 要素名B:contains('text')")

内容を持つ要素を取り出す

$(" 要素名B:parent")

内容を持たない要素を取り出す

$(" 要素名B:empty")

hasによって指定された要素名Bを含む要素名A要素を取り出す

$(" 要素名A:has(要素名B)")

a個おきに要素を指定する

an+bの場合，「aで割った時にb余る」要素を取り出す

$(" 要素名A > 要素名B:nth-child(an+b)")

要素名Bが要素名Aのただひとつの子要素の場合のみを取り出す

$(" selectorA > selectorB:only-child")

属性フィルターを使った指定方法

特定の属性を持つ要素を取り出す

$("要素[属性]")

特定のある値に等しい属性を持つ要素を取り出す

$("要素[属性='値']")

特定のある値に等しくない属性を持つ要素を取り出す

$("要素[属性!='値']")

属性値が前方一致する要素を取り出す

$("要素[属性^=値]")

属性値が後方一致する要素を取り出す

$("要素[属性$=値]")

属性値が部分一致する要素を取り出す

$("要素[属性*=値]")

「属性Bが値C」かつ「属性Dをもつ」，「要素A」を取り出す

$("要素A[属性B=値C] [属性D]")

見出し要素すべてを取り出す

$(":header")

属性Bを持たない要素Aを取り出す

$("要素A:not([属性B])")

全てのフォーム要素を取り出す

$(":input")

要素A内のフォーム要素が利用可能な状態である場合取り出す

$("要素A:has(:enabled)")

その他よく使う指定方法

jQeryを使用してイベントリスナで色々操作したい時などにthisを使って要素を指定しますが，その場合の指定方法について，よく使うパターンを挙げておきます

その要素そのものを取り出す

$(this);

要素の親要素Aを取り出す

$(this).parent("要素A");

要素の子要素(子孫)の要素Aを取り出す

$("要素A",this);

要素の子要素Aを取り出す

$(this).children("要素A");

まとめ

ピンポイントで要素が指定できれば，スクリプトの実行時間も短縮でき，ソースコードを細かく書かなくても済むようになります．いいコトずくめですので，是非覚えておきましょう．

• ツイート
•