Как обернуть набор повторяющихся элементов в jQuery?

Question

В jQuery, как мне обернуть повторяющийся набор элементов в div?

Например, у меня есть:

img
h4
p  
img
h4
p
img
h4
p

Мне нужно обернуть каждый набор img, h4, p с помощью div class="container". Так будет выглядеть:

<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'/>");
});

демо здесь