wrapInner不会将子项添加到DOM中的包装元素

时间:2014-09-06 14:41:42

标签: jquery

我正在尝试做一个innerWrap,然后操作wrap的内容。然而,包装似乎永远不会让它的孩子加入!这是一个测试,显示了这个问题:

var images    = $(element).find('img');
console.log(images);
var wrap      = document.createElement("div")
$(element).wrapInner(wrap)
var images2   = $(wrap).find('img');
console.log(images2);

View as JSFiddle

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

显然,当你将一个元素传递给.wrapInner()函数时,该元素的结构相同的副本,而不是元素本身被包裹在内容中。在您的示例中,您将注意到以下内容:

  • #element最终会有一个符合预期的子项:包含三个图像的div
  • wrap.parentNodenull,表示它存在于内存中,未附加到DOM
  • wrap === $("#element").children().get(0)返回false确认假设

解决方案:修改你的代码:

var $images1 = $("#element").find('img');
$("#element").wrapInner("<div></div>");
var $images2 = $("#element").children().find("img");
// the div can be accessed by doing $("#element").children()
console.log($images1.length, $images2.length, $images1.get(0) === $images2.get(0));