jQuery each and find 调用在 html 上不起作用

Question

我正在尝试在 html 文档中搜索 dl 和 return/store 它们的 '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);

        });
    };

在上面的代码中，没有任何警告。在下面的代码中，警告的内容只是 'undefined'.

    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

Answer 1

当您使用 $() 解析 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 对象的顶层查找元素的 descendants，但是由于 dls 是顶级元素，find没有找到任何东西。

如果 dl 将始终是 body 在那个 HTML 代码段中的直接子级，您可以只使用 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>

Answer 2

检查此 DEMO. use filter 而不是查找。

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

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

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

jQuery each and find 调用在 html 上不起作用

jQuery each and find call not working on html

html

javascript

ajax

jquery

html-parsing