我希望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]。我究竟做错了什么?例子在这里。
您需要更改此行:
html = jQuery(result);
对此:
html = jQuery('<div>').html(result);
实际上,更好的是,您应该将此声明为局部变量:
var html = jQuery('<div>').html(result);
说明
当您这样做时jQuery(result),jQuery拉出<body>元素的子元素并返回围绕这些元素的包装器,而不是返回该<html>元素的jQuery包装器,我倾向于认为这是相当愚蠢的。
jQuery(result)
<body>
<html>
在您的情况下,<body>sidebar.html的包含几个元素和一些文本节点。因此,返回的jQuery对象是这几个元素和文本节点的包装。
当您使用时.find(),它将搜索您调用它的jQuery对象包装的元素的 后代 。在你的情况下,<div id="a">是 不是 其中之一,因为它实际上是 一个 包装的选择的元素,并且不能是其自身的后代。
.find()
<div id="a">
通过将其包装<div>成您自己的a,然后将这些元素“向下”推到某个级别。当您.find()在上面的固定代码中调用该代码时,它会寻找该代码的后代,<div>从而找到您的<div id="a">。
<div>
评论
如果您<div id="a">不在最高级别,即的直接子级<body>,则您的代码可以正常工作。对我来说,这是不一致的,因此是错误的行为。为了解决这个问题,jQuery <div>在工作<body>内容提取魔术时应该为您生成容器。