如何在 jQuery 中包装一组重复的元素？

Question

在 jQuery 中，我如何用 div 包装一组可重复的元素？

例如我有：

img
h4
p  
img
h4
p
img
h4
p

我需要用 div class="container"img、h4、p 设置代码>.所以它看起来像：

<div class="container"> img h4 p </div>
<div class="container"> img h4 p </div>
<div class="container"> img h4 p </div>

我不断嵌套 div.containers！

Answer 1

你可以做这样的事情：

var elems = $("#content").find("img, h4, p");
for(var i = 0; i < elems.length; i+=3) {
  elems.slice(i, i+3).wrapAll("<div class='container'></div>");
}

这通过选择这些元素所在的容器并获取这个特定类型来工作，如果你想要的元素是一切，你可以替换 .find(selector) 与 .children()，在本例中我将其用作父元素：

<div id="container"></div>

您可以在此处查看工作演示

Answer 2

您的示例非常简单，因此这将有效：

$("h4").each(function () {
  $(this).prev().andSelf().next().andSelf().wrapAll("<div class='container'/>");
});

此处演示