8

page.html が side.html のコンテンツを ajax リクエストし、その 2 つの div のコンテンツを抽出するようにしたいと考えています。しかし、私が試したすべてにもかかわらず、応答を解析する正しい方法が見つかりません。

ここにside.htmlがあります：

<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
</head>
<body>
<div id="a">ContentA</div>
<div id="b">ContentB</div>
</body>
</html>

ここにpage.htmlがあります

<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
<script type='text/javascript' src='jquery-1.9.0.min.js'></script>
</head>
<body>
Hello
<script type="text/javascript">
jQuery.ajax({
        url: "side.html",
        success: function(result) {
            html = jQuery(result);

            alert(html.find("div#a").attr("id"));
            alert(html.find("div#a").html());
            alert(html.find("div#a"));

        },
    });
</script>
</body>
</html>

このページにアクセスすると、エラーは発生せず、3 つの alert() は undefined、undefined、および [object Object] を生成します。私は何を間違っていますか？例はここでライブです。

4

2 に答える 2

16

この行を変更する必要があります:

html = jQuery(result);

これに：

html = jQuery('<div>').html(result);

そして実際には、これをローカル変数として宣言する方が良いでしょう:

var html = jQuery('<div>').html(result);

説明

するとjQuery(result)、jQuery は要素の子をプルし、<body>要素の jQuery ラッパーを返すのとは対照的に、それらの要素の周りにラッパーを返します<html>。

あなたの場合、<body>sidebar.html にはいくつかの要素といくつかのテキストノードが含まれています。したがって、返される jQuery オブジェクトは、これらのいくつかの要素とテキスト ノードのラッパーです。

を使用すると、呼び出し元の jQuery オブジェクトによってラップされた要素の子孫.find()が検索されます。あなたの場合、これは実際にはラッパーの選択された要素の1つであり、それ自体の子孫になることはできないため、これらの1つではありません。<div id="a">

それを<div>独自の .find()上記の固定コードを呼び出すと、その子孫が検索される<div>ため、<div id="a">.

コメント

<div id="a">が最上位にない場合、つまり の直接の子でない場合<body>、コードは機能していたはずです。私にとって、これは一貫性がないため、正しくない動作です。これを解決するには、jQuery がコンテンツ抽出マジック<div>を実行しているときにコンテナーを生成する必要があります。<body>

于 2013-02-04T10:31:34.493 に答える
0

これを試して ：

$.get(url,function(content) {
    var content = $(content).find('div.contentWrapper').html();
    ...
}
于 2014-06-06T14:19:00.760 に答える