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方式来包装具有给定<img>的单个<span>标记，并保留对此类<span>的引用以供进一步使用？

Answer 1

这应该这样做：

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

将span包裹起来后，span元素将成为新的父级。

用给定节点包裹单个节点

1 个答案: