jQuery でload 結果のHTMLから上手に任意のテキストを探す

jQuery.ajaxにはload の短縮形で、XHRしたHTMLの任意の要素を抜き出すことができる。

$(element).load()

$("#sample").load("/index.html #container ")

これがすごく便利で、Ajax専用の別テンプレートや、JSONAPIを作らなくて楽ちんなんですね。

でも、CSSセレクタを書くことしかできない。
selectors で要素は取得出来るんだけど、 /index.html中のテキストを取得することは出来ない

以下の様なことは不可能。

$("#sample").load("/index.html #container/text() ") ←当然動かない。

CSSセレクタ部分に、Xpathでも書ければ何とかなるんですがね。
Xpathならtext()を結果として取り出せるんですけど、CSSセレクタだとそうも行かない。

解決策$("<div>")する

$("#sample").load("/index.html", {} , function(responseHtml){ return $("<div>").html(responseHtml).find(" #container ").text() } ) 

最終的にこんなかんじに仕上げてみた。

$("a[rel=prev]").each(function(idx,e){ 
     $.get(e.href,null,function(html){
            console.log($("<div>").html(html).find(".entry-title")) 
      }) 
});

これは、はてなブログのページ間リンクがショボイので、「次の記事・前の記事」としか書いていなくて、余りに残念なのでAjaxでタイトルだけを取り出した例だ。

jquery は余りに簡単にできるので、ついつい出来る範囲で作っちゃうけれど、ちゃんとドキュメントを読んだほうがいいですね。