Как добавить общие обёртки элементам с одним классом, которые находятся между элементами с другим классом?

Question

[kamisarlapsha]

Нужно обернуть эти дивы

<div class="tires-filter--group-block bf-attr-block"></div>

в ещё один div. И чтобы они оборачивались после каждого

<div class="bf-attr-group-header tires-filter--group-header"></div>

и до следующего такого элемента.

Вот код, который сейчас:

<div class="bf-attr-group-header tires-filter--group-header"></div>
<div class="tires-filter--group-block bf-attr-block"></div>
<div class="bf-attr-group-header tires-filter--group-header"></div>
<div class="tires-filter--group-block bf-attr-block"></div>
<div class="tires-filter--group-block bf-attr-block"></div>
<div class="bf-attr-group-header tires-filter--group-header"></div>
<div class="tires-filter--group-block bf-attr-block"></div>
<div class="tires-filter--group-block bf-attr-block"></div>
<div class="tires-filter--group-block bf-attr-block"></div>

Вот код, который должен получиться:

<div class="bf-attr-group-header tires-filter--group-header"></div>
<div class="obernyl">
  <div class="tires-filter--group-block bf-attr-block"></div>
</div>
<div class="bf-attr-group-header tires-filter--group-header"></div>
<div class="obernyl">
  <div class="tires-filter--group-block bf-attr-block"></div>
  <div class="tires-filter--group-block bf-attr-block"></div>
</div>
<div class="bf-attr-group-header tires-filter--group-header"></div>
<div class="obernyl">
  <div class="tires-filter--group-block bf-attr-block"></div>
  <div class="tires-filter--group-block bf-attr-block"></div>
  <div class="tires-filter--group-block bf-attr-block"></div>
</div>

Answer 1

[0xD34F]

const $headers = $('.bf-attr-group-header');
$headers.each(i => $headers
  .eq(i)
  .nextUntil($headers.get(i + 1))
  .wrapAll('<div class="wrapper">')
);

или

document.querySelectorAll('.bf-attr-group-header').forEach((n, i, a) => {
  const wrapper = document.createElement('div');
  const elems = [];
  for (let el = n; (el = el.nextElementSibling) && el !== a[i + 1]; elems.push(el)) ;
  wrapper.append(...elems);
  wrapper.classList.add('wrapper');
  n.after(wrapper);
});

Answer 2

[GreatRash]

https://codepen.io/anon/pen/BORZGd

Answer 3

[Stalker_RED]

api.jquery.com/wrap