使用jQuery来search一个HTMLstring
如果我运行这个代码 –
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/
我们把这个问题分成两部分。
第一：
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属性来parsing传递的HTML并将其插入到当前文档中。 在这个过程中，一些浏览器会过滤出
<html>，<title>或<head>元素。 因此，插入的元素可能不能代表传递的原始string。
- 在第一个代码块中，你的
<html>，<head>和<body>标签被剥离，<div class="bar"></div>依然存在。 在结果<div>只findsearch，并找不到任何东西。 - 在第二个代码块中，你的
<html>，<head>和<body>标签被剥离，而<div><div class="bar"></div></div>在结果中findsearch，并find一个<div>。
至于你的第二部分：
var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); console.log(code.find('div'));
你首先给jQuery一个string，然后把这个string变成一个jQuery对象，并带上两个<div> 。 然后，在每个<div> findsearch， find任何结果。
接下来，
var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); code.each(function() { alert( this.nodeName ); })
each循环遍历jQuery对象，取得两个创build的<div>的每一个，并警告它们的节点名称。 因此，你会得到两个警报。
答案很简单。 当你使用jQuery（html）创build对象时，它会创build一个节点的层次结构，当你find像'div'这样的节点时，它会search除了根元素以外的整个层次结构，而在第一个例子中，节点。 而在第二个例子中，你只有一个孩子的“div”节点。
所以如果你在整个层次中保留一个额外的根节点，那么你可以很容易地find你所有的节点。 喜欢
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'));
在第三个例子中，查找每个匹配元素中的子元素。 在你的div里没有div子（他们没有任何子），所以.find(anything)不会返回任何元素。
。另一方面，迭代集合中的当前元素，其中包括div （有两个匹配的元素 – div ）。
至于你的第一个例子中的<html> ，我不确定 – 也许你不允许在页面加载后创build第二个<html>元素。 $('<html><head></head><body><div class="bar"></div></body></html>'); 只返回div所以.find不返回任何东西。
简单的方法如下：
鉴于string：
`var html= '<html><head></head><body><div class="bar"></div></body></html>';`
search与类栏的div：
`$(html).filter('.bar')`
或所有divs：
`$(html).filter('div')`
用类bar返回对象
