セレクタでjQueryオブジェクトを選択しよう!

セレクタでjQueryオブジェクトを選択しよう!

セレクタとは、jQueryオブジェクトを選択する構文のことです。

書き方はほとんどCSSと同様ですが、jQueryで追加された記法もあります。

!"#$%&'()*+,./:;<=>?@[\]^`{|}~

上のようなメタ文字を入力する場合、直前に \\ を入力する必要があります。

class, idで選択するには?

<div class="class-selector"></div>
<div id="id-selector"></div>
$('.class-selector')
$('#id-selector')

classで選択するには、class名の前に . を入力した文字列を$(”)で囲みます。

セレクタは全てこの形式で入力することになります。

idで選択するには、id名の前に # を入力します。

idの記述方法は、同ページ内のリンクターゲットにも使用されますので、馴染みのある方も多いと思います。

当サイトの目次にも使われています。

複数のセレクタで選択するには?

<div class="class-selector-1"></div>
<div class="class-selector-2"></div>
<div class="class-selector-3"></div>
$('.class-selector-1, .class-selector-2, .class-selector-3')

複数のセレクタで選択する場合、カンマ区切りで入力します。

カンマの後のスペースは不要ですが、入れると見やすいです。

属性で選択するには?

name属性で選択するサンプル

<input type="text" name="name_selector" />
$('input[name="name_selector"]')

属性で選択する場合、最も使うのがname属性です。

input, textarea, select要素などに使用します。

<div data-selector="example"></div>
$('div[data-selector="example"]')

name属性に限らず、値を持つ属性であれば、同様の方法で指定できます。

value属性で選択するには?

ただし、value属性の選択は、通常の方法では上手く行きません。

<input type="text" name="name_selector" value="value-selector" />
$('input[name="name_selector"]').val('value-selector-cahnged');

$('input[value="value-selector-cahnged"]')

name属性がname_selectorの要素の値を.val()でvalue-selector-cahngedに変更しました。

その後、同じ要素をvalue属性で選択しようとしたサンプルです。

一見、上手く行きそうですが、最後のセレクタではinput要素を選択できません。

input要素の値が変更されてもvalue属性の値は変更されないからです。

サンプルでは.val()を使用しましたが、ユーザーが入力した場合も同様です。

.filter()を使う

$('input').filter(function() {
    return this.value === 'value-selector-cahnged'
})

セレクタで全てのinputを選択し、.filter()で値を比較します。

value-selector-changedを任意の値にすれば、他の値でも検索可能です。

属性セレクタの一覧

イコールの前に記号を追加することにより、属性が完全一致する以外の場合でも選択できます。

$('[name*="value"]')

イコールの前にアスタリスクを入力すると、部分一致での検索になります。

サンプルでは、name属性にvalueを含む要素を選択します。

セレクタ解説一致する属性値の例
[name|=”value”]完全一致かハイフンで結合した文字列で始まる場合を検索value-hyphen
[name*=”value”]部分一致検索part_value_example
[name~=”value”]スペース区切りの文字列を検索space value
[name$=”value”]後方一致検索prefix_value
[name=”value”]完全一致検索value
[name!=”value”]否定検索not-value
[name^=”value”]前方一致検索value_suffix

子要素を選択するには?

<div class="parent-selector">
    <div class="child-selector"></div>
    <div class="child-selector"></div>
    <div class="child-selector"></div>
</div>
$('.parent-selector > .child-selector')

親要素 > 子要素の形式で指定します。

複数セレクタと同様、スペースは不要です。

最初、最後の子要素を選択するには?

$('.parent-selector div:first-child')

最初の子要素を選択するには :first-child を使用します。

$('.parent-selector div:last-child')

最後の子要素を選択するには :last-child を使用します。

最初、最後からn番目の子要素を選択するには?

$('.parent-selector div:nth-child(2)')

n番目の要素を選択するには :nth-child(n) を使用します。

サンプルでは、:nth-child(2) で2番目の要素を選択しています。

$('.parent-selector div:nth-last-child(2)')

最後からn番目の要素を選択するには :nth-last-child(n) を使用します。

サンプルでは、 :nth-last-child(2) で2番目の要素を選択しています。

子要素が1つだけの要素を選択するには?

$('.parent-selector div:only-child')

兄弟要素がない、子要素が1つだけの要素を選択します。

サンプルでは、子要素が3つあるので、jQueryオブジェクトは選択されません。

:not()で指定したセレクタ以外の要素を選択する

<div class="selector"></div>
<div class="not-selector"></div>
<div class="selector"></div>
$('div:not(.not-selector)')

:not()のカッコ内に選択したくないセレクタを指定します。

サンプルでは、.not-selectorは選択されず、.selectorのみが選択されます。

セレクタに変数を使用するには?

let selector = '.class-selector';

$(selector)

他のサンプルのように、セレクタは文字列で指定します。

文字列であれば、変数を入力しても問題ありません。

サンプルでは$(‘.class-selector’)と同様の動作になります。

正規表現で選択するには?

jQueryのセレクタは正規表現に対応していません。

value属性で選択するには?と同様、.filter()で実装できます。

<div class="selector-1"></div>
<div class="selector-2"></div>
<div class="selector-3"></div>
$('div').filter(function () {
    let attr = $(this).attr('class');
    
    return attr.match(/selector-[0-9]/);
});

.attr()で検索する属性の文字列を取得します。サンプルではclassです。

.match()で正規表現に一致するか否かを比較し、returnで返します。

.attr(), .match()の引数を変更することで、他の属性、正規表現を指定できます。

まとめ

  • classの選択は$(‘.class’), idの選択は$(‘#id’)
  • 複数のセレクタで選択するには、カンマ区切りで指定します。
  • 属性の選択は$(‘element[attr=”value”]’)
  • 子要素の選択は$(‘parent > child’), 最初の子要素は$(‘element:first-child’), 最後の子要素は$(‘element:last-child’)
  • 最初からn番目の子要素は$(‘element:nth-child(n)’), 最後からn番目の子要素は$(‘element:nth-last-child(n)’)
  • 子要素が1つだけの要素は$(‘element:only-child’)
  • セレクタを否定するには$(‘:not(not-selector)’)
  • セレクタは文字列の変数で指定できます。
  • 正規表現は.filter()を使用して実装できます。

入門カテゴリの最新記事