javascript - 使用 JavaScript 用 DIV 包装独特的元素组

Question

我正在使用一个动态创建以下列表的 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>

我需要将特定li的 s 包装在独特的 div 中，如下所示：

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

我已阅读有关使用该wrapall()函数的信息，但找不到有关如何包装一组不具有相同类的元素的说明。

Answer 1

假设您花时间定义类名和id它们应该出现的最终名称之间的关系，并且您使用有效的 HTML，那么以下纯 JavaScript 可以工作（尽管我认为它可以改进）：

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 小提琴演示。

上述函数转换：

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