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

使用filter代替div和p：

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>');

你有一个包含两个对象的数组：第一个是你的div，第二个是p。在Google Chrome网页检查器中，您会看到如下内容：

[<div id="myDiv">…</div>, <p>P content</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>');

find（）对新创建的元素不起作用

3 个答案: