JSFiddle - React, Tailwind, and code Playground

by Barbara Laird

HTML

<ul>
    <li class="foo1">Hello 1</li>
    <li class="foo1">Hello 1</li>
    <li class="foo1">Hello 1</li>
    <li class="foo2">Hello 2</li>
    <li class="foo1">Hello 1</li>
    <li class="foo1">Hello 1</li>
    <li class="foo2">Hello 2</li>
    <li class="foo2">Hello 2</li>
    <li class="foo2">Hello 2</li>
    <li class="foo2">Hello 2</li>
</ul>

JavaScript

function classList(elem){
    var classes = [];
    $.each( elem, function(index,item) {
        elemClasses = $(item).attr('class').split(/\s+/);
        $.each(elemClasses, function(index,item) {
           if(classes.indexOf(item) === -1) classes.push(item);
        });
    });
    return classes;
}

$.each(classList($('ul li')), function(index, item) {
    $('.' + item).wrapAll('<ul/>');
});