使用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返回对象