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>