我正在尝试在 html 文档中搜索 dl 并返回/存储它们的“id”属性。但是，当我包含链接的“each”函数时，什么也找不到，并且当我执行单个“find”函数调用时，id 属性将返回为未定义，即使它不是。这就是我搜索的 html 的样子:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>blah Resources</title>
<link href="blah" rel="stylesheet" type="text/css">
<style type="text/css"></style></head>
<body cz-shortcut-listen="true">
<span>Resources</span>
<dl id="/data/file.docx">
<dt>Name</dt>
<dd>blah</dd>
<dt>URL</dt>
<dd>blah</dd>
<dt>Last-Modified</dt>
</dl>
<dl id="/data/app.js">
<dt>Name</dt>
<dd>app.js</dd>
<dt>URL</dt>
<dd>blah</dd>
</dl>
<dl id="/data/date.txt">
<dt>Name</dt>
<dd>blah</dd>
</dl>
</body>
</html>
这就是我的代码的样子(ajax调用很好，它是成功的):
function processHTML(html){
alert("processHTML was called");
$(html).find('dl').each(function(){
var url = $(this).attr('id');
alert(url);
});
};
在上面的代码中，没有任何警报。在下面的代码中，警报的内容只是显示为“未定义”。
function processHTML(html){
alert("processHTML was called");
var url = $(html).find('dl').attr('id');
alert(url);
};
我做错了什么？
编辑: 为了进行比较，下面的代码工作得很好，并且驻留在我拥有的另一个 js 文件中，我很难看出这个工作示例和上面的非工作示例之间的区别。
给定这个 html 文档:
<html><head>
<title>blah</title>
<LINK href="resources.css" rel="stylesheet" type="text/css"/>
</head><body>
<span>Resources</span> <dl id="tool">
<dt>Name</dt>
<dd>Tool1</dd>
<dt>URL</dt>
<dt>Created</dt>
<dd>date</dd>
</dl>
<dl id="tool">
<dt>Name</dt>
<dd>Tool2</dd>
<dt>URL</dt>
<dt>Created</dt>
<dd>date</dd>
</dl>
</body>
</html>
这段代码工作得很好:
function processHTML(html){
var name = "";
var url;
$(html).find('dt').each(function(){
var property = $(this).text();
if(property == "Name"){
var temp = $(this).next().text();
name = "";
}
alert(name);
}
};
警报:
工具1
工具2
最佳答案
当您使用$()时解析 HTML，除了 body 的内容之外的所有内容被删除(更多详细信息 in the docs )，所以 $("<html><body><dl></dl></body></html>")实际上与 $("<dl></dl>") 相同(事实上， console.log($("<body><dl></dl></body>")[0].tagName )将记录 DL )。
因此，当您解析 HTML 时，您最终会得到一个包含四个顶级元素的 jQuery 对象: A span和三个dl s。
find 查找 jQuery 对象顶层元素的后代，但由于 dl s 是顶级元素，find没有找到任何东西。
如果dl s 将始终是 body 的直接子级在该 HTML 片段中，您可以只使用 filter 而不是find :
$(html).filter('dl').each(...)
但是如果dl s 可能位于其他内容内，或者如果您只是想让它们处于某个阶段，您可以组合 find与 andSelf :
$(html).find('dl').andSelf('dl').each(...)
我可能会选择后者。
旁注:$(this).attr("id")是获取this.id的真正迂回方式.
$(html).filter('dl') 的实例:
var html =
'<html><head>' +
'<title>blah</title>' +
'<LINK href="resources.css" rel="stylesheet" type="text/css"/>' +
'</head><body>' +
'<span>Resources</span> <dl id="tool">' +
' <dt>Name</dt>' +
' <dd>Tool1</dd>' +
' <dt>URL</dt>' +
' <dt>Created</dt>' +
' <dd>date</dd>' +
'</dl>' +
'<dl id="tool">' +
' <dt>Name</dt>' +
' <dd>Tool2</dd>' +
' <dt>URL</dt>' +
' <dt>Created</dt>' +
' <dd>date</dd>' +
'</dl>' +
'</body>' +
'</html>';
$(html).filter('dl').each(function() {
snippet.log(this.id);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>$(html).find('dl').andSelf('dl') 的实例:
var html =
'<html><head>' +
'<title>blah</title>' +
'<LINK href="resources.css" rel="stylesheet" type="text/css"/>' +
'</head><body>' +
'<span>Resources</span> <dl id="tool">' +
' <dt>Name</dt>' +
' <dd>Tool1</dd>' +
' <dt>URL</dt>' +
' <dt>Created</dt>' +
' <dd>date</dd>' +
'</dl>' +
'<dl id="tool">' +
' <dt>Name</dt>' +
' <dd>Tool2</dd>' +
' <dt>URL</dt>' +
' <dt>Created</dt>' +
' <dd>date</dd>' +
'</dl>' +
'</body>' +
'</html>';
$(html).find('dl').andSelf('dl').each(function() {
snippet.log(this.id);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>关于javascript - jQueryeach 和 find 调用不适用于 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29338225/