セレクタの使い方 [jQuery]

セレクタ

公式サイト：

Selectors | jQuery API Documentation [Official]

使い方

参考：

jQuery のセレクタメモ – Qiita

CSS セレクタを使おう – Qiita

jQuery 関数／セレクタの使い方 | Web Design Leaves

jQuery のセレクタ解説 | SMART

jQuery のセレクタ一覧 | iPentec

jQuery で要素を選択するためのセレクタの指定方法まとめ | SONICMOOV LAB

セレクタ目次 | jQuery リファレンス (jquerystudy.info)

Selectors | jQuery 日本語リファレンス (semooh.jp)

Selectors | W3Schools

子孫セレクタ

ul 要素内の li 要素を抽出する。

var $items = $('ul li');
Code language: JavaScript (javascript)

参考：

子孫セレクター | Webkaru

ancestor descendant | jQuery 日本語リファレンス (semooh.jp)

“ancestor descendant” | jQuery 日本語リファレンス (js STUDIO)

ancestor descendant | jQuery API 日本語リファレンス (StackTrace)

:contains セレクタ

参考：

:contains – 要素のテキストに指定文字列が含まれるか判定する | コピペで使える JavaScript 逆引きリファレンス

contains: で文字列を代入した変数を使って要素を抽出する記載方法 | ふくろく

CSS の属性セレクタや jQuery の contains フィルターをうまく使ってコーディングするとスマート | Travelogue

:contains() – jQuery で特定文字列が含まれているか判定する | 初めてのブログ

:contains – 特定の文字列を持つ要素を取得、設定する | 知るWeb

:contains()フィルタで完全一致を実現する方法 | うぇぶろぐらまーな日誌

:contains(text) | jQuery 日本語リファレンス (semooh.jp)

:contains() | jQuery 日本語リファレンス (js STUDIO)

:contains( ) | jQuery リファレンス (jquerystudy.info)

jQuery( ‘:contains(text)’ ) | アルファシス

:contains() – 指定テキストを含む要素 | リファレンス メモ

:contains() Selector | jQuery API Documentation [Official]

論理積／論理和 (and / or)

参考：

セレクタの and 条件と or 条件 – Qiita

jQuery で複数セレクタを and 条件と or 条件で指定するときの指定方法の違いをメモする | 雑想空間

属性セレクタ

参考：

属性セレクター [attribute=’value’] | Webkaru

属性セレクター [attribute] | Webkaru

属性セレクター [attribute*=’value’] | Webkaru

属性フィルター – 属性値で目的の要素を絞り込むには？ | Build Insider

[ 属性名 = ‘値’ ] | jQuery リファレンス (jquerystudy.info)

[ 属性名 ] | jQuery リファレンス (jquerystudy.info)

属性セレクタ | jQuery リファレンス メモ (cercopes-z.com)

Attribute Equals Selector [name=”value”] | jQuery API Documentation [Official]

Attribute | jQuery API Documentation [Official]

[attribute=value] Selector | W3Schools

複数の属性

複数の属性について論理積条件 (and) で要素を選択する。

var $elem = $('[attr1="val1"][attr2="val2"]');
Code language: JavaScript (javascript)

複数の属性について論理和条件 (or) で要素を選択する。

var $elem = $('[attr1="val1"],[attr2="val2"]');
Code language: JavaScript (javascript)

参考：

複数の属性 | jQuery リファレンス (jquerystudy.info)

複数のセレクタ (or) | jQuery リファレンス (jquerystudy.info)

前方一致／後方一致

属性の前方一致には ^= を使う。

var $elem = $('[attr^="val"]');
Code language: JavaScript (javascript)

属性の後方一致には $= を使う。

var $elem = $('[attr$="val"]');
Code language: JavaScript (javascript)

参考：

jQuery の属性セレクタで前方／後方／部分一致を使って要素を取得する | EC のウェブ担当者のメモ

jQuery で文字列の前方一致や後方一致を判別する方法 | ONE NOTES

[ 属性名 ^= ‘値’ ] | jQuery リファレンス (jquerystudy.info)

jQuery の class 前方一致で詰まった – Qiita

data 属性

参考：

data 属性に特定の値を持つ要素を指定する方法 | うぇぶろぐらまーな日誌

:data

参考：

:data() Selector | jQuery UI 日本語リファレンス (js STUDIO)

要素の存在を判定する

最初の要素が空かどうか判定する。最初の要素が undefined であれば要素は存在しない。

var $content = $('.content');
if ($content[0]) {
    // 要素が存在する場合の処理
}
Code language: JavaScript (javascript)

参考：

jQuery による要素の存在チェックまとめ | 小粋空間

要素の存在を確認する6通りのコードと実行速度 | きほんのき

jQuery オブジェクトが空かどうかを調べる確実な方法 | PisukeCode

jQuery の要素の存在確認について – teratail

大文字小文字を区別しない

参考：

CSS selector case insensitive for attributes – Stack Overflow

要素の包含を判定する (contains)

参考：

$.contains() | jQuery 日本語リファレンス (js STUDIO)

jQuery.contains | jQuery リファレンス (jquerystudy.info)

:contains(text) | jQuery API 日本語リファレンス (StackTrace)

contains() Selector | W3Schools

jQuery.contains() | jQuery API Documentation [Official]

正規表現を使う

• jQuery の each 内で判定する
• jQuery の filter 内で判定する

参考：

jQuery のセレクタに正規表現・属性フィルタを使う方法！ | 侍エンジニア塾ブログ

jQuery に正規表現セレクタを追加する

次の関数を追加することで、:regex が使えるようになる。

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels, '')
        },
        regexFlags = 'ig',
        regex = new RegExp(
            matchParams.join('').replace(/^\s+|\s+$/g, ''),
            regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}
Code language: JavaScript (javascript)

(出典：James Padolsey )

クラス名に -hoge- を含む要素を抽出する。

var $hoge = $(':regex(class, .*-hoge-.*)');
Code language: JavaScript (javascript)

参考：

Regex Selector for jQuery | James Padolsey

jQuery selector regular expressions – Stack Overflow

まとめ

参考：

コンテンツフィルター – 子要素／テキストによって取得すべき要素を絞り込むには？ | Build Insider

文字が含まれているかを判別 | デイレコ