8

我希望 page.html 对 side.html 的内容进行 ajax 请求并提取其两个 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>

当我访问此页面时，我没有收到任何错误，并且三个 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 对象是这几个元素和文本节点的包装器。

当您使用.find()时，它会搜索由您调用它的 jQuery 对象包装的元素的后代。在您的情况下，这不是<div id="a">其中之一，因为它实际上是包装器的选定元素之一，并且不能是其自身的后代。

通过将其包装在<div>您自己的 a 中，您可以将这些元素“向下”推一个级别。当您.find()在上面调用我的固定代码时，它会查找该代码的后代，<div>因此会找到您的<div id="a">.

评论

如果您<div id="a">不在顶层，即 的直接子级<body>，那么您的代码将有效。对我来说，这是不一致的，因此是不正确的行为。<div>为了解决这个问题，当 jQuery发挥其<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 回答