jquery - 新创建的元素上的 find() 不起作用

Question

我创建了新的 jQuery 元素：

var myJqEl = $('<div id="myDiv">Div content<span>Span content</span></div><p>P content</p>');

然后我使用 find 方法：

var mynewEl1 = myJqEl.find('div').html(); // return null
var mynewEl2 = myJqEl.find('span').html(); // return Span content
var mynewEl3 = myJqEl.find('p').html(); // return null

你能告诉我为什么第一个和第三个返回 null 而第二个返回完整内容吗？

谢谢你。

Answer 1

用于andfilter代替：divp

var mynewEl1 = myJqEl.filter('div').html();
var mynewEl2 = myJqEl.find('span').html();
var mynewEl3 = myJqEl.filter('p').html();​

Answer 2

您必须将所有 HTML 内容包装到另一个元素中，例如一个元素div。所以这段代码：

var myJqEl = $('<div><div id="myDiv">Div content<span>Span content</span></div><p>P content</p></div>');

因此，您将拥有所需的正确元素，并且可以find在其上使用方法。

更多解释：

当你用 来创建新元素时$，jQuery 将创建一个我们称之为它的对象Wrapped Set。这个包装的集合实际上是一个 javascript 数组，所以当你创建这样的东西时：

$('<div id="myDiv">Div content<span>Span content</span></div><p>P content</p>');

你有一个包含两个对象的数组：第一个是 your div，第二个是p. 在 google chrome Web Inspector 中，您会看到如下内容：

[<div id=​"myDiv">​…​&lt;/div>​, <p>​P content​&lt;/p>​]

当您使用find包装集中的方法时，它将在第一个元素（div本示例中的标记）上执行。

这就是您mynewEl2返回正确数据的原因。因为span标签存在于div（包装集中的第一个元素）中，所以div标签本身没有任何div标签。所以mynewEl1是空的。

当您将所有 HTML 数据包装到单个标签中时，您的包装集仅包含一个元素，并且您的所有 HTML 数据都将存在于其中。

Answer 3

根级别中有 2 个不同的元素，如果您有一个包含这 2 个元素的“根”，则第一行和第三行将不会检索null.

例如，尝试myJqEl像这样定义变量：

var myJqEl = $('<div><div id="myDiv">Div content<span>Span content</span></div><p>P content</p></div>');