jQueryでいろんな要素の指定パターンまとめてやんよ!!!
jQuery関連の投稿がやたらアクセスが多く、やはり世間のjQueryへの関心が高いのだなぁと。
ということで今回はjQueryの御家芸ともいえる要素指定のパターンを集めてみました。
jQuery関数で指定できる3種類の引数
$はjQueryが組み込まれたHTML文章に設定されるJavaScriptの関数名です。
この関数の引数で、要素を指定する際に以下の3種類を設定できます。
$("CSSセレクタ")
$(DOMオブジェクト)
$($(…)で指定済みの要素)
このように簡単に複数の要素を指定できるのがjQueryのメリットです。
jQueryでサポートするセレクタの種類
| 名称 |
指定の対象 |
例・書式 |
|---|
| 型セレクタ |
要素名 |
divなど |
| IDセレクタ |
ID属性の値 |
[セレクタ]#ID属性の値 |
| クラスセレクタ |
クラス属性の値 |
[セレクタ].class属性の値 |
| 属性セレクタ |
属性名と値 |
セレクタ[attr="value"]など |
| 擬似クラス |
要素の状態や位置など |
a:emptyなど |
| 独自拡張セレクタ |
jQueryで独自に拡張 |
:even、:hasなど |
| 子孫セレクタ |
子孫要素 |
div ulなど |
| 子セレクタ |
子要素 |
p > a |
| 兄弟セレクタ |
後に位置する兄弟要素 |
div + ul (隣接セレクタ)
div ~ ul（間接セレクタ） |
| 全称セレクタ |
適合するものすべて |
* |
| グループ化 |
複数のセレクタを並存 |
div、ulなど |
ID、classセレクタ一覧
ID
| 対象：id="○○○"が設定された要素を指定する |
<div id="main">
<p>テキスト</p>
</div> |
| $('#main').css({'background-color' : '#FF0'}); |
class
| 対象：class="○○○"が設定された要素を指定する |
<div id="main">
<p>テキスト</p>
<div class="right">
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
</ul>
</div> |
| $('.right').css({'background-color' : '#FF0'}); |
擬似クラス系（要素の状態による指定）一覧
:only-child
| 対象：指定した親要素内が単独の子要素 |
<div><ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
</ul></div>
<div><ul>
<li>1番目のリスト</li>
</ul>
</div>
<div><ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
</ul></div>
|
| $('div li:only-child').css({'background-color' : '#FF0'}); |
:first-child
| 対象：最初の子要素 |
<div><ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
</ul></div>
<div><ul>
<li>1番目のリスト</li>
</ul>
</div>
<div><ul>
<li>1番目のリスト</li>1
<li>2番目のリスト</li>
</ul></div>
|
| $('li:first-child').css({'background-color' : '#FF0'}); |
:last-child
| 対象：最後の子要素 |
<div><ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
</ul></div>
<div><ul>
<li>1番目のリスト</li>
</ul>
</div>
<div><ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
</ul></div>
|
| $('li:last-child').css({'background-color' : '#FF0'}); |
:nth-child(n)
| 対象：特定位置最後の子要素 |
<div><ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
</ul></div>
<div><ul>
<li>1番目のリスト</li>
</ul>
</div>
<div><ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
</ul></div>
|
| $('li:nth-child(2)').css({'background-color' : '#FF0'}); |
:not()
| 対象：()内のセレクタに適合しない要素 |
<div>
<p>テキスト</p>
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
</ul>
</div>
|
| $('p:not(div)').css({'background-color' : '#FF0'}); |
:contains("○○○")
| 対象：()内のテキストが含まれている要素 |
<h1>テキスト</h1>
<p>テキスト</p>
<div>テキスト</div>
|
| $('p:contains("テキスト")').css({'background-color' : '#FF0'}); |
独自拡張セレクタ系（位置による指定）一覧
:parent
| 対象：子要素を持つ指定要素 |
<div>
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
</ul>
</div>
<div>
<p>テキスト</p>
</div>
|
| $('ul:parent').css({'background-color' : '#FF0'}); |
:has
| 対象：子要素に<h1> ～ <h6>が含まれる要素 |
<div>
<h2>見出し</h2>
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
</ul>
</div> |
| $('div:has(:header)').css({'background-color' : '#FF0'}); |
:first
| 対象：指定要素の最初を指定 |
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
</ul>
|
| $('li:first').css({'background-color' : '#FF0'}); |
:last
| 対象：指定要素の最後を指定 |
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
</ul>
|
| $('li:last').css({'background-color' : '#FF0'}); |
:even
| 対象：指定要素の偶数番目を指定 |
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
</ul>
|
| $('li:nth-child(even)').css({'background-color' : '#FF0'}); |
:odd
| 対象：指定要素の奇数番目を指定 |
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
</ul>
|
| $('li:nth-child(odd)').css({'background-color' : '#FF0'}); |
:eq(n)
| 対象：指定番数の要素を指定
※0番目からカウントされます |
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
</ul>
|
| $('li:eq(2)').css({'background-color' : '#FF0'}); |
:gt(n)
| 対象：指定番数より後のの要素を指定
※0番目からカウントされます |
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
</ul>
|
| $('li:gt(2)').css({'background-color' : '#FF0'}); |
:lt(n)
| 対象：指定番数より前のの要素を指定
※0番目からカウントされます |
<ul>
<li>1番目のリスト</li>
<li>2番目のリスト</li>
<li>3番目のリスト</li>
<li>4番目のリスト</li>
</ul>
|
| $('li:lt(2)').css({'background-color' : '#FF0'}); |
指定するセレクタの記述について
上記のように、この柔軟なサポートによってCSSを一通り扱ったことのある人にとってはシンプルで感覚的にセレクタの指定が可能です。
CSS同様、単一ページでのみ動作するセレクタ指定ならば問題ありません
が、複数ファイルで共通動作するスクリプトを記述する場合にあまりに大雑把な指定（例：$('div').css({'background-color' : '#FF0'});）など、あらかじめCSSで指定していた背景色の上から思わぬ働きで色を塗りつぶされてしまうので注意してください。
基本スクリプトはCSSより遅く実行されるので、指定要素にはIDやclassを含めた要素に指定をするように心がけてください。（例：$('div#main').css({'background-color' : '#FF0'});）
