Переместите <li>элементов, используя jQuery

Question

Используя jQuery, как я могу изменить разметку ниже?

Итак, эта разметка:

<ul>
   <li class="step">Step</li>
   <li class="form-group">1</li>
   <li class="form-group">2</li>
   <li class="form-group">3</li>
   <li class="step">Step</li>
   <li class="form-group">4</li>
   <li class="form-group">5</li>
</ul>

станет этой разметкой:

<ul>
   <li class="step">Step
      <ul>
         <li class="form-group">1</li>
         <li class="form-group">2</li>
         <li class="form-group">3</li>
      </ul>
   </li>
   <li class="step">Step
      <ul>
         <li class="form-group">4</li>
         <li class="form-group">5</li>
      </ul>
   </li>
</ul>

Я начинаю с чего-то вроде этого, но я в тупике

$("ul")
.find("li.step")
.append("<ul class='step-container'></ul>")
.end()

Answer 1

nextUntil () выполнит задание за вас

// find all the steps
$("li.step").each( function () {
  var li = $(this)
  // create a new ul
  var newUL = $("<ul></ul>")
  // grab the siblings until you hit the next step
  // and append them to the ul
  newUL.append(li.nextUntil("li.step"))
  // add the ul to the step
  li.append(newUL)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
   <li class="step">Step</li>
   <li class="form-group">1</li>
   <li class="form-group">2</li>
   <li class="form-group">3</li>
   <li class="step">Step</li>
   <li class="form-group">4</li>
   <li class="form-group">5</li>
</ul>

Answer 2

Здесь вы go:

const $steps = $("ul#t").children("li.step").toArray().map(function(s) { return $(s); });
for (let $step of $steps) {
    const $next = $step.nextUntil("li.step");
    const $ul = $("<ul></ul>");
    $ul.append($next);
    $ul.appendTo($step);
}

Также убедитесь, что ul может быть однозначно идентифицирован, например ul#exampleId, потому что таким образом вы также будете нацелены на другие ul s.