Javascript 使用 jQuery 搜索一串 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7159426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery to search a string of HTML
提问by ipr101
If I run this code -
如果我运行此代码 -
var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($(html).find('div'));
I get no results returned, if I run this code -
如果我运行此代码，则不会返回任何结果 -
var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($(html).find('div'));
Then I get a single result returned - the inner div (<div class="bar"></div>). I would have expected the first code snippet to return a single result and the second snippet two results.
然后我得到一个返回的结果 - 内部 div ( <div class="bar"></div>)。我本来希望第一个代码片段返回一个结果，第二个片段返回两个结果。
Similarly, this code returns no results -
同样，此代码不返回任何结果 -
var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
console.log(code.find('div'));
but this code alerts 'div' twice -
但这段代码两次提醒“div” -
var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
alert( this.nodeName );
})
Given the result of the second snippet, I would have expected the first code snippet to return two results. Could someone please explain why I'm getting the results I'm getting?
鉴于第二个代码段的结果，我本希望第一个代码段返回两个结果。有人可以解释为什么我得到我得到的结果吗？
回答by Digital Plane
Let's split this question into two parts.
让我们把这个问题分成两部分。
First:
第一的：
var html= '<html><head></head><body><div class="bar"></div></body></html>';
console.log($(html).find('div'));
and
和
var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>';
console.log($(html).find('div'));
do not work because according to the jQuery()docs:
不工作，因为根据jQuery()文档：
When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided. As mentioned, we use the browser's .innerHTML property to parse the passed HTML and insert it into the current document. During this process, some browsers filter out certain elements such as
<html>,<title>, or<head>elements. As a result, the elements inserted may not be representative of the original string passed.
在传递复杂的 HTML 时，某些浏览器可能无法生成与所提供的 HTML 源代码完全相同的 DOM。如前所述，我们使用浏览器的 .innerHTML 属性来解析传递的 HTML 并将其插入到当前文档中。在此过程中，一些浏览器过滤掉某些内容，如
<html>，<title>或<head>元件。因此，插入的元素可能不代表传递的原始字符串。
- In the first code block, your
<html>,<head>, and<body>tags are getting stripped out, and<div class="bar"></div>remains.findonly searches inside the resulting<div>, and cannot find anything. - In the second code block, your
<html>,<head>, and<body>tags are getting stripped out, and<div><div class="bar"></div></div>remains.findsearches inside the result, and finds a single<div>.
- 在第一个代码块中，您的
<html>、<head>和<body>标签被剥离并<div class="bar"></div>保留下来。find只在结果中搜索<div>，找不到任何东西。 - 在第二个代码块中，您的
<html>、<head>和<body>标签被剥离并<div><div class="bar"></div></div>保留下来。find在结果中搜索，并找到单个<div>.
As for your second part:
至于你的第二部分：
var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
console.log(code.find('div'));
You first give jQuery a string, which it takes and makes into a jQuery object with the two <div>'s. Then, findsearches in each <div>, finds nothing and returns no results.
你首先给 jQuery 一个字符串，它接受并用两个<div>'s组成一个 jQuery 对象。然后，find在 each 中搜索<div>，什么也没找到，也不返回任何结果。
Next, in
接下来，在
var code = $("<div id='foo'>1</div><div id='bar'>2</div>");
code.each(function() {
alert( this.nodeName );
})
eachloops through the jQuery object, taking each of the two created <div>'s, and alerts their node name. Therefore, you get two alerts.
each循环遍历 jQuery 对象，获取两个 created 中<div>的每一个，并警告它们的节点名称。因此，您会收到两个警报。
回答by vicky
the answer is very simple. when you make object using jQuery(html) then it make an hierarchy of nodes, and when you find some node like 'div', it searches in whole hierachy except root elements, and in your first example, you dont have child 'div' nodes. And in your second example you have only one child 'div' node.
答案很简单。当您使用 jQuery(html) 创建对象时，它会创建一个节点层次结构，当您找到像“div”这样的节点时，它会在除根元素之外的整个层次结构中进行搜索，在您的第一个示例中，您没有子“div”节点。在您的第二个示例中，您只有一个子“div”节点。
so if you keep one extra root node in whole hierarchy, then you can find all your nodes easily. like
因此，如果您在整个层次结构中保留一个额外的根节点，那么您可以轻松找到所有节点。喜欢
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'));
回答by Jeff
The simple way is as follows:
简单的方法如下：
Given the string:
鉴于字符串：
var html= '<html><head></head><body><div class="bar"></div></body></html>';
Search for the div with the class bar:
使用类栏搜索 div：
$(html).filter('.bar')
Or all divs:
或所有 div：
$(html).filter('div')
Returns the object with the class bar
返回带有类的对象 bar
回答by pimvdb
.findin the third example, searches children in each matched element. Inside your divs there are no divchildren (they don't have any children), so .find(anything)will not return any element.
.find在第三个示例中，搜索每个匹配元素中的子元素。在你的divs 中没有div孩子（他们没有任何孩子），所以.find(anything)不会返回任何元素。
.each, on the other hand, iterates over the current elements in the set, which does include the divs (there are two matched elements - the divs).
.each，另一方面，迭代集合中的当前元素，其中包含divs（有两个匹配的元素 - divs）。
As for <html>in your first example, I'm not sure - perhaps you're not allowed to create a second <html>element after the page has loaded. $('<html><head></head><body><div class="bar"></div></body></html>');only returns the divso .finddoes not return anything.
至于<html>在您的第一个示例中，我不确定 - 也许您不允许<html>在页面加载后创建第二个元素。$('<html><head></head><body><div class="bar"></div></body></html>');只返回div所以.find不返回任何东西。
