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片段，并将其解析成那个，然后在每个片段上调用find而不是某些父结构。：）

但是然后把它全部放入父div中，并搜索父母，你会找到你想要的东西。

真的，将它全部包装在div中是跨浏览器工作的最安全的方法。

使用jQuery选择创建的HTML

2 个答案: