jQuery each 和 find 调用在 html 上不起作用答案

【问题标题】：jQuery each and find call not working on htmljQuery each 和 find 调用在 html 上不起作用
【发布时间】：2015-06-02 23:55:55
【问题描述】：

我正在尝试在 html 文档中搜索 dl 并返回/存储它们的 'id' 属性。但是，当我包含一个链接的“每个”函数时，什么都找不到，并且当我执行一个“查找”函数调用时，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 变量中得到响应了吗？

标签： javascript jquery html ajax html-parsing

【解决方案1】：

当您使用$() 解析HTML 时，除了body 的内容之外的所有内容都会被删除（更多细节in the docs），因此$("<html><body><dl></dl></body></html>") 实际上与$("<dl></dl>") 相同（实际上，@ 987654329@) 将记录DL)。

因此，当您解析 HTML 时，最终会得到一个带有四个顶级元素的 jQuery 对象：一个 span 和三个 dls。

find 在 jQuery 对象的顶层查找元素的后代，但由于 dls 是顶层元素，find什么都没找到。

如果 dls 将始终是该 HTML sn-p 中 body 的直接子级，您可以只使用 filter 而不是 find：

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

但是如果dls 可能在其他东西中，或者如果您只想让它们处于某个阶段，您可以将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>

【讨论】：

【解决方案2】：

检查此DEMO。使用filter 而不是查找。

find 获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。

filter 将匹配元素集减少为匹配选择器或通过函数测试的元素。

  $(html).filter('dl').each(function(){
        var url = $(this).attr('id');
        alert(url);
  });

【讨论】：

过滤器确实可以完美运行，谢谢！仍在试图解决为什么 find 不起作用，我已经更新了我的操作以包含一个对我有用的示例，并且它不会跳过找到的元素。
@dalva 在这里你所说的不同的 js 文件是什么意思？？