用给定节点包装单个节点

Question

我有一个picture 变量指向我的文档树中的<img> 元素。我想用<span> 标签包装。当我使用普通的 DOM 函数时，一切都按预期工作：

var container = document.createElement("span");
container.style.border = "1em solid red";
container.innerHTML = "Container";
picture.parentNode.appendChild(container);
container.appendChild(picture);
container.style.borderColor = "green"; // Result: green on screen

更具体地说，container 指向唯一的<span>。但是当我用jQuery wrap() method 来做这件事时：

var container = $("<span></span>")
    .css({border: "1em solid red"})
    .text("Container");
container.css({borderColor: "yellow"}); // Result: yellow on screen
$(picture).wrap(container);
container.css({borderColor: "green"});

...查询克隆我的节点并将图片包裹在克隆周围，因此container 指向一个从未使用过且与文档分离的节点。我理解这是因为 wrap() 需要为 jQuery 链中的每个匹配元素提供一个包装器对象（克隆完全有意义）。

是否有一种优雅的 jQuerish 方法可以用给定的 <span> 包装单个 <img> 标记并保留对此类 <span> 的引用以供进一步使用？

Answer 1

应该这样做：

var picWrapper = $(picture).wrap(container).parent();

一旦你将它包裹在 span 中，span 元素将成为它的新父元素。