使用JavaScript用div包装唯一的元素组

我正在使用WordPress插件动态创建以下列表：

<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>

---

我已经读过关于使用

wrapall（）

函数的内容，但是我找不到关于如何包装一组不具有相同类的元素的说明

假设您花时间定义类名和它们应该出现的最终

id

之间的关系，并且您使用有效的HTML，下面的纯JavaScript可以工作（尽管我认为可以改进）：

var分组={
“主要”：[“蛋白质”、“海鲜”、“乳制品”、“蔬菜”、“水果”]，
‘碳水化合物’：[‘坚果籽’、‘谷物’、‘面食’]，
“香料”：[“香料”、“香草”]，
‘其他’：[‘技术’、‘特殊’、‘服务’]
};
功能分组依据（el、map）{
var els，
newList=document.createElement（'ul'），
newListItem=document.createElement（'li'），
tmpList，tmpLI；
for（映射中的var键）{
if（映射hasOwnProperty（键））{
els=el.querySelectorAll（'.'+map[key].join（'，.）；
tmpList=newList.cloneNode（）；
tmpLI=newListItem.cloneNode（）；
tmpLI.appendChild（tmpList）；
tmpLI.id=键；
对于（变量i=0，len=els.length；i

上述函数用于转换：

<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>

进入：

$（“.technology、.special、.servings”）.wrapAll（“，{'class'：'other'}）和类似的REST如何（打算）定义哪些元素类应添加到哪个
div
？顺便提一下，
div
不是
ul
元素的有效子元素。
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);

<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>

<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>