裏紙に書く程度の内容

jQuery セレクタを自作する

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

自作セレクタを作って使ってみよう

についてです。

自作セレクタを作る

jQueryのセレクタは自分で作れるらしいです。

$.extend($.expr[':'], {
    suzuki: function (a) {
        return $(a).text() === 'suzuki';
    },
    over100: function (a) {
        return $(a).text() > 100;
    }
});

extend()を使ってexprを拡張しています。

内容的には新たに2つのセレクタ(suzuki,over100)を追加しています。

このセレクタを使うには以下のような感じ。

$('#my-list li:suzuki').on('click', function() {
    alert('This is SUZUKI!');
});
$('#my-list li:over100').css('font-style', 'italic');

:first等と使い方は一緒ですね。

実際に動かすとこんな感じ。


  • Yamaha
  • 120
  • 50
  • 40
  • suzuki

使いどころは?

ぶっちゃけ、使いどころはパッと思いつきません。

しいて言えば、大量に使う場合とか。

あと、jQueryプラギンを自作する場合、汎用性を持たせるために利用できるかも。

結論

知っていたらなんか玄人っぽい。けど、別にいらないや。

Index