reorder ul based on li class

38
February 10, 2019, at 4:30 PM

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>

READ ALSO
Reading the value of variable in another if condition inside function

Reading the value of variable in another if condition inside function

I have function defined for getting the data from JSON and passing it in renderBut I had to put 2 different condition to process the data

24
How to update changed user data, when Logged In in several browsers

How to update changed user data, when Logged In in several browsers

I'm storing user sessions in mongo collection, using express-session middleware

18
Font awesome fonts not showing up in firefix and edge but it shows up in Chrome

Font awesome fonts not showing up in firefix and edge but it shows up in Chrome

font awesome icons are not appearing in Edge and firefox but its appearing in chromeWhere's the catch? Test this page in firefox, Edge and chrome --> https://jakedvirus

25