Обернуть элементы списка в два столбца с помощью метода wrapAll ()

Question

Я хотел бы обернуть несколько групп li в два div, поскольку элементы отображаются в одной <ul> через CMS. Таким образом, ситуация выглядит следующим образом:

<ul>
    <li class="list-1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
        <li class="list-2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
        <li class="list-3">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
        <li class="list-4">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
</ul>

Но я хотел бы использовать метод jquery wrapAll или аналогичный для группы list-1 и list-2 в один div, а list-3 с list-4 во второйодин, чтобы получить этот результат:

<ul>
    <div class="group-1">
        <li class="list-1">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </li>
            <li class="list-2">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </li>
    </div>
    <div class="group-2">
        <li class="list-3">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </li>
            <li class="list-4">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </li>
    </div>
    </ul>

Есть ли способ, которым я мог бы достичь этого с помощью чего-то вроде:

$( "li:nth-child(1), li:nth-child(2)" ).wrapAll( "<div class='group-1'></div>" );

Спасибо за любой совет!

Answer 1

Используя эту функцию, вы можете разделить li на группы.

Вам нужно изменить только переменную groupSep, и ваш список будет сгруппирован по значению переменной.

В вашемслучай, я установил groupSep = 2.

Вот демоверсия

$(document).ready(function() {
  var groupCounter = 1;
  var groupSep = 2;
  var liHtml = '';
	$('ul > li').each(function(index, el){
    if(((index+1) % groupSep) === 1){
      $('ul').append('<div class="group-'+groupCounter+'"></div>');
      for(i=0; i<groupSep; i++){
        $('ul > li').eq(0).appendTo('ul .group-'+groupCounter);
      }
      groupCounter++;
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="list-1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
        <li class="list-2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
        <li class="list-3">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
        <li class="list-4">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
      <li class="list-5">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
      <li class="list-6">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
      <li class="list-7">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
      <li class="list-8">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
</ul>