javascript - 每个jQuery和查找调用不适用于html

我正在尝试搜索dl的html文档并返回/存储其'id'属性。但是，当我包含一个链接的“每个”函数时，什么也找不到，并且当我执行单个“查找”函数调用时，即使id属性未定义，其id属性也会作为未定义返回。这是html im搜索的内容：

<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对象：一个span和三个dl。

find在jQuery对象的顶层搜索元素的后代，但是由于dl是顶层元素，因此find找不到任何东西。

如果dl始终是该HTML代码段中body的直接子代，则可以使用filter代替find：

$(html).filter('dl').each(...)

但是如果dl可能在其他内容中，或者如果您只想允许它们处于某个阶段，则可以将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 - 每个jQuery和查找调用不适用于html，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29338225/