JSFiddle - React, Tailwind, and code Playground

by lamarant

HTML

<ul>
    <li>This is Item 1
        <ul>
            <li>Item 1 Sub 1</li>
            <li>Item 1 Sub 2</li>
            <li>Item 1 Sub 3</li>
        </ul>
    </li>
    <li>This is Item 2
        <ul>
            <li>Item 2 Sub 1</li>
            <li>Item 2 Sub 2</li>
            <li>Item 2 Sub 3</li>
            <li>Item 2 Sub 4</li>
        </ul>
    </li>
</ul>
<hr />
<button>Do It</button>

CSS

span {
    color: red;
}

JavaScript

function doit() {
    $('ul li').not('ul ul li').each(function () {
        var $clone = $(this).clone(true);
        var $origUL = $('ul', $(this)).first();
        var $newUL = $('<ul></ul>');
        $newUL.html($origUL.html());
        $clone.children('ul').remove();
        $(this).html('').append($('<span>' + $clone.html().trim() + '</span>')).append($newUL);
    });
}
$('button').click(function () {
    doit();
});