セレクタ

参考:

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

使い方

参考:

jQuery のセレクタメモ – Qiita

jQuery のセレクタ解説 | SMART

子孫セレクタ

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

$('ul li')

参考:

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

複数の属性

$('[attr1="val1"][attr2="val2"]')

参考:

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

前方一致/後方一致

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

$('[attr^="val"]')

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

$('[attr^="val"]')

参考:

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

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

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

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

data 属性

参考:

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

:data

参考:

:data() Selector | js STUDIO

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

参考:

CSS selector case insensitive for attributes – Stack Overflow

正規表現を使う

  • 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));
}

(出典:James Padolsey)

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

$(":regex(class, .*-hoge-.*)")

参考:

Regex Selector for jQuery | James Padolsey

jQuery selector regular expressions – Stack Overflow

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です