reorder ul based on li class

Question

I am sure this is very simple but sadly I am not seeing it right now. I have a menu with list items. some of them have a class col-1 and the others have a class of col-2. I am trying to loop through each list item and separate them into two new <ul>'s and then replace this <ul> with the two new <ul>'s.

here is my current html:

<ul>
  <li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#"><a href="#">Blah</a></a>
  </li>
</ul>

Here is the output I would like to achieve:

<ul>
  <li>
    <ul class="col-1">
      <li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom ">
        <a href="#">Blah</a>
      </li>
      <li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
        <a href="#">Blah</a>
      </li>
      <li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
        <a href="#">Blah</a>
      </li>
    </ul>
  </li>
  <li>
    <ul class="col-2">
      <li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom ">
        <a href="#">Blah</a>
      </li>
      <li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
        <a href="#">Blah</a>
      </li>
      <li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
        <a href="#">Blah</a>
      </li>
      <li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
        <a href="#"><a href="#">Blah</a></a>
      </li>
    </ul>
  </li>
</ul>

I know I need to replace the contents of the ul with the new li's but I don't think I am even using the right approach at this point.

Answer 1

You might do it like this:

$('ul')
  .append($('<li>').append($('<ul class="col-1">').append($('ul .col-1'))))
  .append($('<li>').append($('<ul class="col-2">').append($('ul .col-2'))))

ul {
  border: solid 1px;
  margin: 4px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#"><a href="#">Blah</a></a>
  </li>
</ul>

Answer 2

Try jQuery.appendTo(). No explicit looping and temp arrays necessary, since this will move the matching elements from one container to another.

$('ul > li.col-1').appendTo('ul.parent > ul.first');

$('ul > li.col-2').appendTo('ul.parent > ul.second');

ul.first {
  background-color: lightgray;
}

ul.second {
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>

  <li id="nav-menu-item-27594" class="col-1 col-header menu-item menu-item-type-custom menu-item-object-custom ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-26963" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-27030" class="col-1 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-27595" class="col-2 col-header menu-item menu-item-type-custom menu-item-object-custom ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-27220" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-25885" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#">Blah</a>
  </li>
  <li id="nav-menu-item-25922" class="col-2 menu-item menu-item-type-post_type menu-item-object-page ">
    <a href="#"><a href="#">Blah</a></a>
  </li>

</ul>

<ul class="parent">
  <ul class="first"></ul>
  <ul class="second"></ul>
</ul>