人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQuery.ajax()で外部HTMLファイルを読み込み、要素を取得したいのですが、最上層の要素を取得することが出来ません。
・jsファイル
---------------------------------------------------------------------------
$("#button").click(function() {
$.ajax({
type: 'GET',
url: 'file.html',
dataType: 'html',
success: function (data) {
console.log($('div', $(data)));
},
});
});
---------------------------------------------------------------------------

・file.html
---------------------------------------------------------------------------
<div class="test">test</div>
---------------------------------------------------------------------------


ちなみに、以下のようにdiv.testをdivでさらに囲んでやると取得することが出来るようです。

---------------------------------------------------------------------------
<div class="wrap">
<div class="test">test</div>
</div>
---------------------------------------------------------------------------


jQueryのバージョンは1.11、ブラウザはSafari 7.05を使用しています。

どのようなスクリプトで最上層の要素を取得することができるのでしょうか?

●質問者: コバン
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Lhankor_Mhy
ベストアンサー

単純に

$(data)

でいいと思うんですが、もしcontextを使った表現にしたいのであれば、

$(':first-child', $(data)).parent()

とか書けば取得できると思います。


a-kuma3さんのコメント
[http://q.hatena.ne.jp/1407951894#a1235785:title=匿名質問の方でも答えがついてる]みたいですけど、気が付いてないのか、気に入らないのか、書いてもらわないと分からないですよね。

Lhankor_Mhyさんのコメント
あら。 同じ質問があったんですね。しかも3日前かー。 じゃあ、この回答もダメですかねー。

a-kuma3さんのコメント
jQuery のセレクタを使わないと駄目だ、という開発規約があるとか、事情があるのかもしれませんけどね。

コバンさんのコメント
ご回答ありがとうございます。 匿名質問に頂いていたご回答に気付いておりませんでした。申し訳ありません。 特に規約や事情があるわけでは無かったのですが、DocumentオブジェクトとjQueryオブジェクトが頭の中で混同しており(というか、ただの勉強不足ですが、、、)期待していた動きではなかったので、原因をご教示頂きたく質問させて頂きました。 ご回答頂きました方法も試してみましたが、読み込むデータにルートノードが複数存在してしまっている(存在し得る)ため解決策には至りませんでした。 ルートノードが複数存在し得るファイルを扱おうとしていることがそもそもの間違いなのかなと思っております。 色々と自分でも調べました結果、読み込むファイルにルートノードが一つだけ存在するようにする。もしくは、 >|javascript| newDoc = document.implementation.createHTMLDocument(title); ||< 上記のようにHTMLDocumentを生成し、その中にappend()でデータを入れてやるというのが解決策というか、正しいやり方なのかなと考えております。 ノンプログラマーのため、質問や返信の文面が支離滅裂だったらすみません。。。

コバンさんのコメント
あと、匿名質問とこちらのマルチポストになってしまい、申し訳ありません。 匿名質問よりもご回答頂きやすいのかなと思いこちらで質問しなおさせて頂きました。 以後気をつけます。

Lhankor_Mhyさんのコメント
context を利用しなくていいのであれば、フィルタでできると思います。 >|| $('<div id="div1">div1</div><div id="div2" class="test">div2</div>').filter('div.test'); ||<

コバンさんのコメント
find()ばかり考えていましたが、filter()というメソッドがあったのですね。 勉強になりました。ありがとうございます。

2 ● a-kuma3

探したい要素が、ルートにあるかどうかが分からない場合に、不便だな、ってことに気が付きました。

jQuery.load は、URL の最後に、空白で区切ってセレクタを書くことで、対象の一部を読み込めます。
http://api.jquery.com/load/#loading-page-fragments

以下は、jQuery 1.10.2 の jQuery.load の実装の抜粋です。

 }).done(function( responseText ) {

 // Save response for use in complete callback
 response = arguments;

 self.html( selector ?

 // If a selector was specified, locate the right elements in a dummy div
 // Exclude scripts to avoid IE 'Permission Denied' errors
 jQuery("<div>").append( jQuery.parseHTML( responseText ) ).find( selector ) :

 // Otherwise use the full result
 responseText );

jQuery の実装にならって、こんな風にしてはどうでしょう。

$("#button").click(function() {
 $.ajax({
 type: 'GET',
 url: 'file.html',
 dataType: 'html',
 success: function (data) {
 console.log($('.test', $('<div>').append(data)));
 },
 });
});

コバンさんのコメント
こんなload()使い方があったのですね。 HTMLDocumentを生成せずともルートノードを作ってやることで、その子孫を検索できるというわけですね。 参考になりました。ありがとうございます。

質問者から

ご回答頂きましたお二人とも非常に参考になりました。
どちらもベストアンサーなのですが、最初に頂きましたご回答をベストアンサーをさせて頂きました。
ありがとうございました。


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ