javascript - 如何使用 javascript 或 MooTools 在特定 DIV 之后或之前包装所有 DIV？

Question

我想做的是尝试在某些特定 DIV 之后或之前包装所有 DIV。

代码如下:

<div class="heading">Heading one</div>
<div>question one</div>
<div>question two</div>
<div>question three</div>
<div class="heading">Heading two</div>
<div>question one</div>
<div>question two</div>
<div>question three</div>
<div>question four</div>
<div>question five</div>
<div>question six</div>
<div class="heading">Heading three</div>
<div>question one</div>
<div>question two</div>

所以我想将这些标题 DIV 中的问题动态包装起来，这样如果任何标题的问题或多或少都会自动包装在另一个 div 中，并为它们分配 id 或类以显示和隐藏。

想要使用 JavaScript 或 mootools 动态地执行此操作:

请记住，随着用户从管理面板针对每个标题添加问题，问题可能会有所不同。

编辑:另请记住，标题也可能会有所不同，用户可以添加更多标题，并且每个标题都可以包含问题。

<div class="heading">Heading one</div>
<div id='one'>
    <div>question one</div>
    <div>question two</div>
    <div>question three</div>
</div>
<div class="heading">Heading two</div>
<div id='two'>
    <div>question one</div>
    <div>question two</div>
    <div>question three</div>
    <div>question four</div>
    <div>question five</div>
    <div>question six</div>
</div>
<div class="heading">Heading three</div>
<div id='three'>
    <div>question one</div>
    <div>question two</div>
</div>

如果您认为这个问题不好，请在评论中告诉我，如果您评价为不好，我将无法提出更多问题。

谢谢。

Answer 1

应该这样做:

var newParent, id = 1;
$$('div').each(function (element) {
    if (element.hasClass('heading')) {
        newParent = new Element('div[id=heading_' + id + ']').inject(element, 'after');
        id++;
    } else {
        newParent.wraps(element);
    }
});

示例:jsFiddle

或者不使用全局变量:

$$('div').each(function (element) {
    if (element.hasClass('heading')) {
        var id = $$('div[id^=heading_').length + 1;
        var newParent = new Element('div[id=heading_' + id + ']').inject(element, 'after');
    } else {
        element.getPrevious().wraps(element);
    }
});

示例:jsFiddle

.wraps() 方法是这里的关键。