我正在尝试从 ajax 下载的页面中提取一个元素，以便稍后将其附加到 DOM。我正在获取这样的页面:
$.ajax({
url: pagePath,
success: function (data) {
//data is correctly shown in debugger, all the elements exist.
var $div = $(data).find("[data-custom-attr]").first();
//$(data) has lenght > 0, however $div has length 0!
//$(data).find("#ajaxpage") also has lenght 0!
},
dataType: "html"
});
这是获取的页面:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ajaxpage" data-custom-attr="ajaxpage">
<h2>Ajax downloaded page!</h2>
</div>
</body>
</html>
我尝试过几种不同的选择器，但都失败了。我觉得代码中的某个地方一定有一个非常愚蠢的错误，但看不到它。
这些选择器有什么问题？
最佳答案
这样做的原因是 jQuery 抛弃了你给它的所有废话，只用 h2 解析 div:
$("<!DOCTYPE html><html><head></head><body><div id='ajaxpage' data-custom-attr='ajaxpage'><h2>Ajax downloaded page!</h2></div></body></html")
与
完全相同$("<div id='ajaxpage' data-custom-attr='ajaxpage'><h2>Ajax downloaded page!</h2></div>")
(jQuery 的 $("...") 不会创建完整文档，它只会构建 DOM 片段)
由于第一个元素已经是您的 div，因此您无法在其子树中找到 [data-custom-attr]，因此结果将为 []。如果您执行 find("h2") 操作，效果会很好，因为它位于 div 的子树中，但您无法找到 div 本身。
关于javascript - jQuery:选择器无法在 ajax 下载页面上工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17219314/