CODEWITHSUNDEEP
jquerylistclasssplit
Peanuts
Peanuts

Reputation: 2681

Split list by class with jQuery

I have an unordered list, and some of its items have classes like so:

<ul>
    <li class="specialOne">Some Content</li>
    <li>Some Content</li>
    <li>Some Content</li>
    <li>Some Content</li>
    <li class="specialTwo">Some Content</li>
    <li class="specialThree">Some Content</li>
    <li>Some Content</li>
</ul>

My goal is to split it into two different unordered lists, one of them with the list items without a class, and the other gathering the list items with classes, like so:

   <ul>
       <li>Some Content</li>
       <li>Some Content</li>
       <li>Some Content</li>
       <li>Some Content</li>
   </ul>
   <ul>
       <li class="specialOne">Some Content</li>
       <li class="specialTwo">Some Content</li>
       <li class="specialThree">Some Content</li>
   </ul>

I have tried this but it groups the lists by similar class, and I want all the classes merged together.

Is there any simple code to get this? I am at a loss.

Upvotes: 0

Views: 80

Answers (1)

Oliver Trampleasure
Oliver Trampleasure

Reputation: 3293

This works as you requested, matching any li that have the class attr

Demo

// Create new list and append to end of body
$("body").append("<ul class='class-list'></ul>");

// Append all list items that have the class attribute
$("ul.class-list").append( $("li[class]") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
<ul>
    <li class="specialOne">Some Content + class</li>
    <li>Some Content</li>
    <li>Some Content</li>
    <li>Some Content</li>
    <li class="specialTwo">Some Content + class</li>
    <li class="specialThree">Some Content + class</li>
    <li>Some Content</li>
</ul>
</body>

Upvotes: 1

Related Questions