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包装在这样的唯一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 Fiddle demo

上述功能转换为：

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

使用JavaScript将唯一的元素组包含在DIV中

1 个答案: