Question: I have an unordered dynamic list with same class list items. and I want to group the same class list items into one ul in the main ul. 
How can I group same class list items?

I want to convert the below dynamic list

```
<ul>
    <li class="a1">Some Content</li>
    <li class="a1">Some Content</li>
    <li class="a1">Some Content</li>
    <li class="a1">Some Content</li>
    <li class="a2">Some Content</li>
    <li class="a2">Some Content</li>
    <li class="a3">Some Content</li>
</ul>

```

into this

```
<ul>
    <li>A1
        <ul>
            <li class="a1">Some Content</li>
            <li class="a1">Some Content</li>
            <li class="a1">Some Content</li>
            <li class="a1">Some Content</li>
        </ul>
    </li>
    <li>A2
        <ul>
            <li class="a2">Some Content</li>
            <li class="a2">Some Content</li>
        </ul>
    </li>
    <li>A3
        <ul>
            <li class="a3">Some Content</li>
        </ul>
    </li>
</ul>

```

Answer: 
Here a solution for you:

HTML:

```
<ul id="BaseNode">
    <li class="a1">A</li>
    <li class="a1">B</li>
    <li class="a1">C</li>
    <li class="a1">D</li>
    <li class="a2">E</li>
    <li class="a2">F</li>
    <li class="a3">G</li>
</ul>

```

---

jQuery:

```
$(document).ready(function(){
    var lis = $("#BaseNode > LI");
    var as = { };

    $.each(lis, function(i, el){
        var c = $(el).attr("class");

        if(as[c] == null) {
            as[c] = new Array();
        }

        as[c].push(el);
    });

    $("#BaseNode").empty();
    $.each(as, function(i, el) {
        var li = $("<li>" + i.toUpperCase() + "</li>");
        var ul = $("<ul></ul>");

        $(ul).append(el);
        $(li).append(ul);
        $("#BaseNode").append(li);
    });
});

```

I created also a [jsFiddle](https://jsfiddle.net/3hm6yczh/1/) where you can see the result. I added an `ID` to first `UL` only for convenience.
Try this,

```js
var   classes = {};

$('ul li').each(function() {
 classes[$(this).attr('class')] = $(this).attr('class');
});

$.each(classes,function(entry) {
   $("."+entry).wrapAll("<li>"+entry.toUpperCase()+"<ul></ul></li>");
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
    <li class="a1">Some Content</li>
    <li class="a1">Some Content</li>
    <li class="a1">Some Content</li>
    <li class="a1">Some Content</li>
    <li class="a2">Some Content</li>
    <li class="a2">Some Content</li>
    <li class="a3">Some Content</li>
</ul>
```