Как на JQUERY обернуть каждые два элемента списка в тег?

Question

[Cheizer]

Подскажите пожалуйста, как обернуть каждые два элемента в тег?

Например есть список

<div class="team">
 <div class="team_single">1</div>
<div class="team_single">2</div>
<div class="team_single">3</div>
<div class="team_single">4</div>
<div class="team_single">5</div>
<div class="team_single">6</div>
<div class="team_single">7</div>
<div class="team_single">8</div>
<div class="team_single">9</div>
<div class="team_single">10</div>
</div>

Пытаюсь обернуть каждые два блока в блок с классом NEW

$('.team .team_single').each(function (i, el) {
  $(el).wrap( function(){
   if(i:odd){
       return "<div class='new'></div>";
   }
   else{
       return "";
   }
 });
     });

В итоге хочу получить:

<div class="team">
<div class="new">
 <div class="team_single">1</div>
<div class="team_single">2</div>
</div>
<div class="new">
<div class="team_single">3</div>
<div class="team_single">4</div>
</div>
<div class="new">
<div class="team_single">5</div>
<div class="team_single">6</div>
</div>
<div class="new">
<div class="team_single">7</div>
<div class="team_single">8</div>
</div>
<div class="new">
<div class="team_single">9</div>
<div class="team_single">10</div>
</div>
</div>

Но не получается :( Подскажите решение пожалуйста!

Answer 1

[Тигран Абрамян]

const divs = $(".team > .team_single");

for (let i = 0; i < divs.length; i += 2) {
  divs.slice(i, i + 2).wrapAll("<div class='new'></div>");
}

Comments

[Cheizer]

не работает к сожалению :(

[Тигран Абрамян]

Роман Кузнецов, отлично работает
https://jsfiddle.net/45mafLnd/

[Cheizer]

TAbrahamyan, а у меня не работает, и ошибка бьет https://codepen.io/Cheizer/pen/RwrPBee

Что не так? Скопировал ваш код.

[Cheizer]

TAbrahamyan, Благодарю! В CODEPEN jquery не подключил :)

[Cheizer]

TAbrahamyan, а не подскажете, как так же удалить можно теги ..... <.div> из списка?

[Тигран Абрамян]

Роман Кузнецов, если я правильно понял то вы хотите вывести наоборот, то есть из этого

<div class="team">
  <div class="new">
    <div class="team_single">1</div>
    <div class="team_single">2</div>
  </div>
  <div class="new">
    <div class="team_single">3</div>
    <div class="team_single">4</div>
  </div>
  <div class="new">
    <div class="team_single">5</div>
    <div class="team_single">6</div>
  </div>
  <div class="new">
    <div class="team_single">7</div>
    <div class="team_single">8</div>
  </div>
  <div class="new">
    <div class="team_single">9</div>
    <div class="team_single">10</div>
  </div>
</div>

получить такое

<div class="team">
  <div class="team_single">1</div>
  <div class="team_single">2</div>
  <div class="team_single">3</div>
  <div class="team_single">4</div>
  <div class="team_single">5</div>
  <div class="team_single">6</div>
  <div class="team_single">7</div>
  <div class="team_single">8</div>
  <div class="team_single">9</div>
  <div class="team_single">10</div>
</div>

то можно же и так обойтись

[Cheizer]

TAbrahamyan, нет, я после того как обернули, хочу после удалить эти теги ..... <.div>

[Тигран Абрамян]

Роман Кузнецов, ничего не понял, приведите пример что хотите получить

[Cheizer]

TAbrahamyan, ну просто, обратная ситуация.

Как из этого

<div class="team">
  <div class="new">
    <div class="team_single">1</div>
    <div class="team_single">2</div>
  </div>
  <div class="new">
    <div class="team_single">3</div>
    <div class="team_single">4</div>
  </div>
  <div class="new">
    <div class="team_single">5</div>
    <div class="team_single">6</div>
  </div>
  <div class="new">
    <div class="team_single">7</div>
    <div class="team_single">8</div>
  </div>
  <div class="new">
    <div class="team_single">9</div>
    <div class="team_single">10</div>
  </div>
</div>

Получить это?

<div class="team">
    <div class="team_single">1</div>
    <div class="team_single">2</div>
    <div class="team_single">3</div>
    <div class="team_single">4</div>
    <div class="team_single">5</div>
    <div class="team_single">6</div>
    <div class="team_single">7</div>
    <div class="team_single">8</div>
    <div class="team_single">9</div>
    <div class="team_single">10</div>
</div>

[Тигран Абрамян]

Роман Кузнецов, ну я этот же пример привел только местами перепутал, изменил коммент, и смотрите код

[Cheizer]

TAbrahamyan, Благодарю!!! :)

Answer 2

[0xD34F]

Где элементы находятся, во что и по сколько надо оборачивать:

const parent = document.querySelector('.team');
const wrapperTag = 'div';
const wrapperClass = 'new';
const wrapSize = 2;

Оборачиваем:

parent.querySelectorAll(':scope > *').forEach((n, i) => {
  if (!(i % wrapSize)) {
    parent.appendChild(document.createElement(wrapperTag));
    parent.lastChild.classList.add(wrapperClass);
  }

  parent.lastChild.appendChild(n);
});

или

parent.append(...Array.from(
  { length: Math.ceil(parent.children.length / wrapSize) },
  () => {
    const wrapper = document.createElement(wrapperTag);
    wrapper.className = wrapperClass;
    wrapper.append(...Array.prototype.slice.call(parent.children, 0, wrapSize));
    return wrapper;
  }
));