jQuery - Split up list in two lists at a specific break point

Question

I have a big -list with lots of li-elements. I want to split the ul-list into multiple ul lists with jquery.

To mark at which li element I want to start a new ul list I have inserted a class="column_break".

Do you have a hint for me – how I can separate the list and insert a new ul-element?

Is-Status:

<ul class="list--column">
   <li id="menu-item-1" class="column-break"><a href="#"> First colum</a> </li>
   <li id="menu-item-2"><a href="#"> pizza</a> </li>
   <li id="menu-item-3"><a href="#"> ice crem </a> </li>
   <li id="menu-item-4"><a href="#"> salad </a> </li>
   <li id="menu-item-5"><a href="#"> pasta </a> </li>

   <li id="menu-item-9" class="column-break"><a>Second column</a>   </li>
   <li id="menu-item-10"><a href="#"> Coffee </a>  </li>
   <li id="menu-item-11"><a href="#"> Orange Juice </a> </li>
   <li id="menu-item-12"><a href="#" > Cola </a>  </li>
</ul>

Should-Status:

<ul class="list--column">
   <li id="menu-item-1" class="column_break"><a href="#"> First colum</a> </li>
   <li id="menu-item-2"><a href="#"> pizza</a> </li>
   <li id="menu-item-3"><a href="#"> ice crem </a> </li>
   <li id="menu-item-4"><a href="#"> salad </a> </li>
   <li id="menu-item-5"><a href="#"> pasta </a> </li>
</ul><ul class="list--column">
   <li id="menu-item-9" class="column_break"><a>Second column</a>   </li>
   <li id="menu-item-10"><a href="#"> Coffee </a>  </li>
   <li id="menu-item-11"><a href="#"> Orange Juice </a> </li>
   <li id="menu-item-12"><a href="#" > Cola </a>  </li>
</ul>

I wanted to implement it with this code lines, but this is not working:

  $wrapper.children(".column-break").each(function(i,item) {
        var $following = $(item).nextUntil(".column_break");
        $wrapper.append($("<ul class='list--column'></ul>").append(item, $following));
   });

Answer 1

Try and see if this solves your problems:

$('.column-break').each(function() {
  var ul = $(this).closest("ul"); 
  var collection = $(this).nextAll('li'); 
  if (collection.length > 0) {
    $('<ul />').append(collection).insertAfter(ul);
  }
});

Demo Link to similar question

$('.column-break').each(function() {
  var ul = $(this).parent(); 
  var collection = $(this).nextAll('li'); 
  if (collection.length > 0) {
    $('<ul />').append(collection).insertAfter(ul);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list--column">
  <li id="menu-item-1" class="column-break"><a href="#"> First colum</a> </li>
  <li id="menu-item-2"><a href="#"> pizza</a> </li>
  <li id="menu-item-3"><a href="#"> ice crem </a> </li>
  <li id="menu-item-4"><a href="#"> salad </a> </li>
  <li id="menu-item-5"><a href="#"> pasta </a> </li>

  <li id="menu-item-9" class="column-break"><a>Second column</a> </li>
  <li id="menu-item-10"><a href="#"> Coffee </a> </li>
  <li id="menu-item-11"><a href="#"> Orange Juice </a> </li>
  <li id="menu-item-12"><a href="#"> Cola </a> </li>
</ul>