jQuery のセレクタ機能を拡張する

jQuery の魅力のひとつは豊富な セレクタ機能 だけど、それをさらに拡張することもできる。その簡単な方法を紹介してくれている記事をみつけた。

• Extending jQuery’s selector capabilities - James Padolsey

たとえばインライン要素を取得するセレクタ機能は以下のように書けば作れちゃう。

$.extend($.expr[':'],{
  inline: function(a) {
    return $(a).css('display') === 'inline';
  }
});

これで、以降は :inline でインライン要素を取得できる。じゃあついでにブロックレベル要素を取得する機能も追加。

$.extend($.expr[':'],{
  inline: function(a) {
    return $(a).css('display') === 'inline';
  },
  block: function(a) {
    return $(a).css('display') === 'block';
  }
});

素晴らしい!