jQuery.ajax()で取得したHTMLの一部を抜き出す方法
jQuery.ajax()で取得したHTMLの一部を抜き出す方法を紹介します。
１．問題点
次のように、ajax()メソッドで取得したHTMLを丸ごと埋め込むサンプルはネットで多くみかけます。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$.ajax({
url: 'http://user-domain/foo.html',
dataType: 'html',
})
.done(function(data) {
$("#bar").html(data);
})
.fail(function(data) {
// ...
});
</script>
<div id="bar"></div>が、取得したHTMLの一部だけを抜き出して利用したい場合、どのように記述すればよいか分かりません。
２．取得したHTMLの一部を抜き出す（その1）
たとえば、取得するページ「http://user-domain/foo.html」の内容が以下のような内容とします。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>hoge</title>
</head>
<body>
<div>
<p id="hoge">hoge</p>
<p id="fuga">fuga</p>
</div>
</body>
</html>この中から
hogeというテキストだけを抜き出したい場合、done()メソッド内で引数のdataを「$(data)」という風に指定し、さらにfind()を使えば取得できるようです。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$.ajax({
url: 'http://user-domain/foo.html',
type: 'GET',
dataType: 'html',
})
.done(function(data) {
$(data).find('p').each(function(){
if ($(this).is('#hoge')) {
$("#bar").html($(this).text());
return false;
}
});
})
.fail(function( data ) {
// ...
});
});
</script>
<div id="bar"></div>idセレクタで指定する場合、次のように記述してもOKです。
.done(function(data) {
$("#bar").html($(data).find('#hoge').text());
})３．取得したHTMLの一部を抜き出す（その2）
セレクタのコンテキストとして$(data)またはdataを与えても抜き出せるようです。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$.ajax({
url: 'http://user-domain/foo.html',
type: 'GET',
dataType: 'html',
})
.done(function(data) {
$("#bar").html($('#hoge', $(data)).html());
})
.fail(function( data ) {
// ...
});
});
</script>
<div id="bar"></div>または
.done(function(data) {
$("#bar").html($('#hoge', data).html());
})４．注意事項
サンプルを作って試したところ、期待する動作になる場合とそうでない場合がありました。
たとえばサンプルのHTMLにあるdiv要素をfind()で指定しても正常にパースできないようです。
Posted by yujiro このページの先頭に戻る
- jQuery+ajaxでモーダルのコンテンツを取得する方法
- jQueryでパスワードの表示・非表示を切り替えるサンプル
- jQueryでファイル選択時にプレビュー表示する方法
- ラジオボタンをjQueryで解除する方法
- テーブルのセルをポイントすると行と列を反転表示するjQueryプラグイン「Table Hover」
- jQueryで親ページからiframeのスクロールバーを非表示にする方法
- jQueryのカスタムビルドが簡単にできるサービス「jQuery Builder」
- jQueryでCSSをまとめて書き換える方法のまとめ
- 親ページからiframe内の要素にCSSを適用させる方法
- jQueryで要素を削除する方法のまとめ
- jQueryでテキストを追加するたびにスクロールさせる方法
- jQuery.ajax()でファイルをアップロードする方法
- preventDefault()で無効にしたイベントを有効にする方法
- jQueryで要素数を取得する方法のまとめ
- jQueryやJavaScriptでパスワードフィールドの文字を表示する方法
トラックバックURL
コメントする
greeting
