JavaScript-XPath を jQuery で

id:amachang がリリースした JavaScript-XPath が、かなり良さげ。
JavaScript-XPath の検索結果を jQuery オブジェクトにして、利用できると便利そうなので、以下のようなコードを書いてみた。

(function(jQuery){
 jQuery.xpath = function(selector, context){
  context = context || jQuery(document);
  var r, res=[];
  context.each(function() {
   r = document.evaluate(selector, this, null, 7, null);
   for(var node_no=0; node_no<r.snapshotLength; node_no++){
    res.push(r.snapshotItem(node_no));
   }
  });
  return new jQuery(res);
 };
 jQuery.extend(jQuery.prototype, {xpath: function(selector){return jQuery.xpath(selector, this);}});
})(jQuery);
var $x = jQuery.xpath;&#91;/javascript&#93;

これで、jQueryオブジェクト.xpath() または $x() を介して JavaScript-XPath 検索結果を jQuery オブジェクトとして利用することができる。
使い方は jQueryオブジェクト.xpath("XPath 文字列") または $x("XPath 文字列", jQueryオブジェクト)
$x() の第2引数は省略可能で、検索範囲を限定したい場合にセットしてください。
<span id="more-1507"></span>

例えば <code>&lt;div id=&quot;content&quot;&gt;&lt;/div&gt;</code> の中から <code>&lt;a href=&quot;hogehoge.jpg&quot; rel=&quot;lightbox&quot;&gt;&lt;/a&gt;</code> な要素を抽出したい場合は。
[javascript]$('#content').xpath('.//a[@rel="lightbox"]')
// または
$x('id("content")').xpath('.//a[@rel="lightbox"]')
// または
$x('//div[@id="content"]//a[@rel="lightbox"]')

と書けばよい。
jQuery オブジェクトを返すので、あとはご自由に。

と思ったら、ご本人もjQuery や Prototype.js にバインディングさせる方法を考えておられるようですね。
では、ちょっと待ちますか (^^;;


2007年11月18日:追記
早速出ましたね、jQuery用プラグイン。仕事が速いなぁ。使い勝手も良さげ。
JavaScript-XPath の jQuery 用のプラグインと Prototype.js 用のプラグインを公開しました – IT戦記

コメントを残す

メールアドレスが公開されることはありません。