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

我想做的是尝试在某些特定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>

标题一
问题一
问题二
问题三
标题二
问题一
问题二
问题三
问题四
问题五
问题六
标题三
问题一
问题二

如果你认为这个问题在评论中不好，请告诉我，这样如果你认为这个问题不好，我就不能再问更多的问题了

谢谢。

js

$（'.heading+div'）。每个（函数（）{
$（this.nextUntil（“.heading”）.andSelf（）.wrapAll（“”）；
});

这里有不同的ID

js

var ID=0；
$（'.heading+div'）。每个（函数（）{
ID++；
$（this）.nextUntil（“.heading”）.andSelf（）.wrapAll（''）.attr（'id'，'id'+id）；
});

js

$（'.heading+div'）。每个（函数（索引，元素）{
$（this.nextUntil（“.heading”）.andSelf（）.wrapAll（“”）；
$（元素）.parent（）.attr（'id'，'id'+索引）；
});

我正在使用索引和元素，因此id计数从0开始

不影响最后一个

js

$（'.heading:not（：last）+div'）。每个（函数（索引，元素）{
$（this.nextUntil（“.heading”）.andSelf（）.wrapAll（“”）；
$（元素）.parent（）.attr（'id'，'id'+索引）；
});

将前面提到的jquery解决方案应用于mootools，您可以使用“GetUntil”方法：。然后使用wrapps:。

这应该可以做到：

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);
    }
});

例子： 或者不使用globals：

$$('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);
    }
});

例子：

---

方法是这里的关键。

您不能使用jQyery来实现这一点，这样会更好。不，我不能使用jQuery。但是你可以在jQuery中告诉我解决方案。旁注：在标题标签中包装标题，而不是div标签！谢谢，但是我们不能给每个包装分配一个唯一的id吗？是的，我按照你的问题做了，我正在努力实现。谢谢：）如果我找不到解决方案，明天将接受你的答案。很抱歉你做错了什么，我想我想我必须为你添加的内容div分配唯一的id，而不是为它的孩子。是的，这可以解决问题，但我们也可以避免扭曲最后一个问题，也就是最后一个问题。i、 e.问题二非常最后很好我们能否避免最后一个问题停止扭曲它，使其成为提交按钮，就像在最后一个标题中一样，无论最后一个标题是什么，第三个问题一问题二--->我们能否停止包装此元素？@M3Dev，是的，但请为该部分添加HTML，以便我能正确回答。只需最后一个标题中的最后一个问题，即问题2，它不应该被包装。很好，但当我尝试实现它时，它会说：无法读取的属性'wrapps'undefined@M3Dev那么您的HTML与问题（！）中的不同。检查我的小提琴在最后的评论，没有错误。这就是为什么我要你的HTML。。。

$('.heading + div').each(function (index, element) {
    $(this).nextUntil(".heading").andSelf().wrapAll('<div class="content" />');
    $(element).parent().attr('id', 'id' + index);
});

$('.heading:not(:last) + div').each(function (index, element) {
    $(this).nextUntil(".heading").andSelf().wrapAll('<div class="content" />');
    $(element).parent().attr('id', 'id' + index);
});

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);
    }
});

$$('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);
    }
});