Jquery. Как разделить массив на несколько частей через each

Question

Имеется такая структура из h2 и h3.

<h2>тест 1</h2>
<h2>тест 2</h2>
<h3>тест 3</h3>
<h3>тест 4</h3>
<h2>тест 5</h2>

Хотел сделать через each, не особо получилось так как хотелось бы. Каким образом можно получить подобную структуру?

<ul>
<li>тест 1</li>
<li>тест 2</li>
<li>
  <ul>
    <li>тест 3</li>
    <li>тест 4</li>
  </ul>
<li>
<li>тест 5</li>
</ul>

Изначально делал так:

$('h2, h3').each(function(index, element){
  var name = $(this).text();
  $('ul').append('<li'>'+ name +'</li>');
});

Answer 1

// переменная для отслеживания индекса вложенного списка
let nestedIndex = null;
$('h2, h3').each(function(index, element){
  let name = $(this).text();
  // если эл-т h2 - добавляем его в ul и обнуляем индекс 
  if ( element.nodeName === 'H2' ) {
    $('ul.main').append('<li>'+ name +'</li>');
    nestedIndex = null;
  } 
  // если встречаем h3
  else if (element.nodeName === 'H3') {
    // проверяем, есть ли индекс вложенного списка
    if ( nestedIndex ) {
      // если есть - ему добавляем новую li
      $('ul.nested-'+nestedIndex).append('<li>'+ name +'</li>')
    } else {
      // если нет - добавляем старому li эл-т вместе с подменю
      $('ul.main').append('<li><ul class="nested-'+index+'"><li>'+name+'</li></ul></li>');
      nestedIndex = index;
    }
  }
  // удаляем h2/h3 эл-т
  element.remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>тест 1</h2>
<h2>тест 2</h2>
<h3>тест 3</h3>
<h3>тест 4</h3>
<h2>тест 5</h2>
<h3>тест 6</h3>
<h3>тест 7</h3>
<h3>тест 8</h3>
<h3>тест 9</h3>
<h2>тест 10</h2>


<ul class="main"></ul>

БЛОГ НА HUSL

Jquery. Как разделить массив на несколько частей через each

Ответы (1 шт):