Use JavaScript to Wrap Unique Groups of Elements with DIVs

Question

I am using a WordPress plugin that dynamically creates the following list on the fly:

<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
<li class="spices"></li>
<li class="herbs"></li>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>

I need to wrap specific li s in unique divs like this:

<ul>
<div id="main">
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
</div>
<div id="carbs">
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
</div>
<div id="spice">
<li class="spices"></li>
<li class="herbs"></li>
</div>
<div id="other">
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</div>
</ul>

I've read about using the wrapall() function but I can't find instructions on how to wrap a group of elements that do not have the same class.

Answer 1

Assuming that you take the time to define the relationship between the class-names and the eventual id under which they should appear, and that you use valid HTML, the following plain JavaScript works (albeit I think it could be refined):

var grouped = {
    'main' : ['proteins','seafood','dairy','veggies','fruit'],
    'carbs' : ['nuts-seeds','grains','pasta'],
    'spice' : ['spices','herbs'],
    'other' : ['technique','special','servings']
};

function groupBy(el, map) {
    var els,
        newList = document.createElement('ul'),
        newListItem = document.createElement('li'),
        tmpList, tmpLI;
    for (var key in map) {
        if (map.hasOwnProperty(key)){
            els = el.querySelectorAll('.' + map[key].join(', .'));
            tmpList = newList.cloneNode();
            tmpLI = newListItem.cloneNode();
            tmpLI.appendChild(tmpList);
            tmpLI.id = key;
            for (var i = 0, len = els.length; i < len; i++){
                tmpList.appendChild(els[i]);
            }
            el.appendChild(tmpLI);
        }
    }
}

groupBy(document.querySelector('ul'),grouped);

JS Fiddle demo .

The above function converts:

<ul>
    <li class="proteins"></li>
    <li class="seafood"></li>
    <li class="dairy"></li>
    <li class="veggies"></li>
    <li class="fruit"></li>
    <li class="nuts-seeds"></li>
    <li class="grains"></li>
    <li class="pasta"></li>
    <li class="spices"></li>
    <li class="herbs"></li>
    <li class="technique"></li>
    <li class="special"></li>
    <li class="servings"></li>
</ul>

Into:

<ul>
    <li id="main">
        <ul>
            <li class="proteins"></li>
            <li class="seafood"></li>
            <li class="dairy"></li>
            <li class="veggies"></li>
            <li class="fruit"></li>
        </ul>
    </li>
    <li id="carbs">
        <ul>
            <li class="nuts-seeds"></li>
            <li class="grains"></li>
            <li class="pasta"></li>
        </ul>
    </li>
    <li id="spice">
        <ul>
            <li class="spices"></li>
            <li class="herbs"></li>
        </ul>
    </li>
    <li id="other">
        <ul>
            <li class="technique"></li>
            <li class="special"></li>
            <li class="servings"></li>
        </ul>
    </li>
</ul>