使用 jQuery 搜索一串 HTML

IT技术 javascript jquery jquery-selectors
2021-03-14 20:25:22

如果我运行此代码 -

var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($(html).find('div'));

如果我运行此代码，则不会返回任何结果 -

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($(html).find('div'));

然后我得到一个返回的结果 - 内部 div ( <div class="bar"></div>)。我本来希望第一个代码片段返回一个结果，第二个片段返回两个结果。

同样，此代码不返回任何结果 -

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
console.log(code.find('div'));

但这段代码两次提醒“div” -

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
    alert( this.nodeName );
})

鉴于第二个代码段的结果，我本希望第一个代码段返回两个结果。有人可以解释为什么我得到我得到的结果吗？

http://jsfiddle.net/ipr101/GTCuv/

4个回答

让我们把这个问题分成两部分。

第一的：

var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($(html).find('div'));

和 

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($(html).find('div'));

不工作，因为根据jQuery()文档：

在传递复杂的 HTML 时，某些浏览器可能不会生成与所提供的 HTML 源完全相同的 DOM。如前所述，我们使用浏览器的 .innerHTML 属性来解析传递的 HTML 并将其插入到当前文档中。在此过程中，一些浏览器过滤掉某些内容，如<html>，<title>或<head> 元件。因此，插入的元素可能不代表传递的原始字符串。

  • 在第一个代码块中，您的<html>、<head>和<body>标签被剥离并<div class="bar"></div>保留下来。find只在结果中搜索<div>，找不到任何东西。
  • 在第二个代码块中，您的<html>、<head>和<body>标签被剥离并<div><div class="bar"></div></div>保留下来。find在结果中搜索，并找到单个<div>.

至于你的第二部分：

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
console.log(code.find('div'));

你首先给 jQuery 一个字符串，它接受并用两个<div>'s组成一个 jQuery 对象。然后，find在 each 中搜索<div>，什么也没找到，也不返回任何结果。

接下来，在

var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
    alert( this.nodeName );
})

each循环遍历 jQuery 对象，获取两个 created 中<div>的每一个，并警告它们的节点名称。因此，您会收到两个警报。

答案很简单。当您使用 jQuery(html) 创建对象时，它会创建一个节点层次结构，当您找到像“div”这样的节点时，它会在除根元素之外的整个层次结构中进行搜索，并且在您的第一个示例中，您没有子“div”节点。在您的第二个示例中，您只有一个子“div”节点。

因此，如果您在整个层次结构中保留一个额外的根节点，那么您可以轻松找到所有节点。喜欢

var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($('<div></div>').append(html).find('div'));

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($('<div></div>').append(html).find('div'));
应该这样做。如果根元素超过 1 个，则接受的答案将不起作用。
2021-05-10 20:25:22
那是正确的答案。另一种对我有用的写作是 $('<div>'+html+'</div>').find('div')
2021-05-13 20:25:22

简单的方法如下：

鉴于字符串：

var html= '<html><head></head><body><div class="bar"></div></body></html>';

使用类栏搜索 div：

$(html).filter('.bar')

或所有 div：

$(html).filter('div')

返回带有类的对象 bar

伟大的！你拯救了我的一天！
2021-05-03 20:25:22

.find在第三个示例中，搜索每个匹配元素中的子元素。在你的divs 中没有div孩子（他们没有任何孩子），所以.find(anything)不会返回任何元素。

.each，另一方面，迭代集合中的当前元素，其中包含divs（有两个匹配的元素 - divs）。

至于<html>在您的第一个示例中，我不确定 - 也许您不允许<html>在页面加载后创建第二个元素。$('<html><head></head><body><div class="bar"></div></body></html>');只返回div所以.find不返回任何东西。

jQuery（或更准确地说，浏览器）删除html,head和body标签，只保留body内容。
2021-04-16 20:25:22
其它你可能感兴趣的问题
上一篇使用 Discord.js 发送消息 下一篇使用 Array 对象作为 ES6 Map 的键