使用jQuery選擇創建的HTML

Question

爲什麼不能正常工作？

var string = '<b>Hello</b> this is just a <b>test</b>'; 
console.log($(string).find('b')); 

我希望Firebug的控制檯來給我兩個<b>元素，而是我得到一個空數組。

但是，如果我把它改成這樣：

var string = '<b>Hello</b> this is just a <b>test</b>'; 
console.log($('<div/>').html(string).find('b')); 

據我想要做什麼。我明白，jQuery內部分配通過HTML不能處理通過createElement到<div>元素爲了解析它到一個DOM結構，但它不應該能夠找到這個傳遞的HTML中的元素，就像我上面試過的？爲了使事情更加令人困惑，有時候我發現人們成功地使用第一種語法，當他們從AJAX請求返回（並且有時格式錯誤）HTML時，但是這似乎對我而言沒有效果，但沒有手動將我的HTML附加到<div>

我錯過了什麼？

Answer 1

在您的第一個版本中，jQuery對象包含三個節點 - b標記，文本節點和第二個b標記。

當您撥打find時，會搜索這三個節點的b標籤。由於三個節點都沒有任何孩子，所以沒有找到任何東西。

您的第二個版本創建了一個帶有這三個節點的標籤div。當您撥打find時，它會在div標籤的子代中搜索b標籤，它會找到它。

如果您撥打filter而不是find，它將搜索該集合中的節點。但是，它不會找到嵌套在集合中其他節點內的任何b標籤。

Answer 2

看來，當你用$（string）創建一個元素時，jQuery創建了一個包含三個DOM項目的jQuery對象，第一個粗體標籤，一個文本節點和第二個粗體標籤。在那個時候，當你調用.find時，它會在每個內部查找 - 並且沒有嵌套的粗體顯示，因此它什麼也找不到。

從某種意義上說，它確實在按照您的要求進行操作 - 您將三條DOM片段分開，然後將其解析出來，然後調用每個父代結構的查找。 :)

但是，然後把它放在一個父母的div，並尋找父母，你會發現你在找什麼。

真的，將所有內容封裝在div中是跨瀏覽器工作的最安全的方式。