要素セット全体から,要素名A直下の要素名Bで最初の要素を取り出す
その他
jQueryを使って特定の要素を指定する際にセレクタを使いますが,指定方法を間違ったりすると,余計な要素まで取得してしまったり,要素そのものを間違えてしまったりします.
今回は備忘録も兼ねて,セレクタで要素を指定するパターンを挙げ,どの要素が指定されるのかを解説していきます.
目次
セレクタとは
セレクタはjQueryを記述する際の$()の中のことを指します.
のように記述し,操作したい要素を指定するために使用します.
要素を指定する方法(基本)
まず,基本的な要素の指定方法を紹介します.
すべての要素を指定する
要素名を指定して要素を指定する
指定した要素全てに反映される.
id名から要素を指定する
idはユニークなため,反映されるのは一つの要素となる.
クラス名から要素を指定する
クラス名に一致する要素に反映される.
要素名もしくはid名に一致する要素を指定する
id名内の配下にある要素を指定する
検索対象は#id名内全ての要素
id名直下のa要素を指定する
検索対象は直下のa要素のみ
要素名Aの次に現れる要素名Bを指定する
要素名Aの以降に現れる要素名Bの全てを指定する
フィルターを使った指定方法
要素セット全体から,要素名A直下の要素名Bで最初の要素を取り出す
要素セット全体から,要素名A直下の要素名B最後の要素を取り出す
親要素を起点とし,要素名A直下の要素名B最初の要素を取り出す
1 | $( "要素名A > 要素名B:first-child" ) |
親要素を起点とし,要素名A直下の要素名B最後の要素を取り出す
1 | $( "要素名A > 要素名B:last-child" ) |
上記の違いは,以下のサンプルを見てください.
それぞれの指定方法で,最初と最後の要素の文字色を変更しています.
- リスト1テキスト1
- リスト1テキスト2
- リスト1テキスト3
- リスト2テキスト1
- リスト2テキスト2
- リスト2テキスト3
このように,取得した要素の中から最初と最後の要素を取り出す場合と,親要素を起点にそれぞれの最初と最後の要素を取り出す場合に分けられます.
要素名A内の要素名Bで偶数番目の要素を取り出す
要素名A内の要素名Bで奇数番目の要素を取り出す
要素名A直下の要素名Bでn番目の要素を取り出す
要素名A直下の要素名Bでn番目以前の要素すべて(n番目の要素は含まず)を取り出す
要素名A直下の要素名Bでn番目以降の要素すべて(n番目の要素は含まず)を取り出す
textという文字列を含む要素(大文字小文字の区別あり)を取り出す
1 | $( " 要素名B:contains('text')" ) |
内容を持つ要素を取り出す
内容を持たない要素を取り出す
hasによって指定された要素名Bを含む要素名A要素を取り出す
a個おきに要素を指定する
an+bの場合,「aで割った時にb余る」要素を取り出す
1 | $( " 要素名A > 要素名B:nth-child(an+b)" ) |
要素名Bが要素名Aのただひとつの子要素の場合のみを取り出す
1 | $( " selectorA > selectorB:only-child" ) |
属性フィルターを使った指定方法
特定の属性を持つ要素を取り出す
特定のある値に等しい属性を持つ要素を取り出す
特定のある値に等しくない属性を持つ要素を取り出す
属性値が前方一致する要素を取り出す
属性値が後方一致する要素を取り出す
属性値が部分一致する要素を取り出す
「属性Bが値C」かつ「属性Dをもつ」,「要素A」を取り出す
見出し要素すべてを取り出す
属性Bを持たない要素Aを取り出す
全てのフォーム要素を取り出す
参考URL:http://www.hp-stylelink.com/news/2013/11/20131122.php