javascript - 如何在div中包装一组html元素

如何在文档中的所有.firstlevel p标签周围包裹div标签。基本上为所有第一级p节点创建一个父节点，并对所有目标类：.secondlevel和.thirdlevel p节点重复相同的过程。

我已经基于论坛中的类似问题尝试了几种方法，但均未成功。

当前代码生成的文档不是所需的格式。
当前，div环绕连续的p.firstlevel节点，而不是所有p.firstlevel节点，但是我需要div将从文档开始到结尾的所有p.firstlevel包裹。
p.secondlevel，p.thirdlevel都已正确包装。

我的问题是，如何包装从第一个p.firstlevel到最后一个p.firstlevel的div，如期望的输出所示？

以下是我从here改编的代码：

$(".firstlevel")
    .filter(function() {
        return !$(this).prev().is(".secondlevel");
    })
    .map(function() {
        return $(this).nextUntil(".firstlevel").andSelf();
    }).wrap('<div class="wrap" />');

样本源html

<p class="generic">Lorem ipsum dolore</p>
<p class="firstlevel">One - Quibusdam, asperiores
<p class="firstlevel">One - Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore
<p class="firstlevel">One - Lorem ipsum dolore
<p class="secondlevel">Two - Lorem ipsum dolore
<p class="thirdlevel">Three - Pariatur, consequuntur.</p>
<p class="thirdlevel">Three - Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore
<p class="secondlevel">Two - Lorem ipsum dolore
<p class="thirdlevel">Three - Lorem ipsum dolore
<p class="thirdlevel">Three - Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore
<p class="firstlevel">One - Lorem ipsum dolore
<p class="secondlevel">Two - Lorem ipsum dolore
<p class="secondlevel">Two - Lorem ipsum dolore
<p class="firstlevel">One - Lorem ipsum dolore
<p class="firstlevel">One - Lorem ipsum dolore
<p class="firstlevel">One - Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore
<p class="firstlevel">One - Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore
<p class="firstlevel">One - Dolor repellendus</p>
<p class="class_gen">Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore</p>

所需的输出

<p class="generic">Lorem ipsum dolore</p>
<div class="first">
<p class="firstlevel">One - Quibusdam, asperiores
<p class="firstlevel">One - Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore
<p class="firstlevel">One - Lorem ipsum dolore
<div class="second">
<p class="secondlevel">Two - Lorem ipsum dolore
<div class="third">
<p class="thirdlevel">Three - Pariatur, consequuntur.</p>
<p class="thirdlevel">Three - Lorem ipsum dolore
</div>
<p class="class_gen">Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore
</div>
<div class="second">
<p class="secondlevel">Two - Lorem ipsum dolore
<div class="third">
<p class="thirdlevel">Three - Lorem ipsum dolore
<p class="thirdlevel">Three - Lorem ipsum dolore
</div>
<p class="class_gen">Lorem ipsum dolore
</div>
<p class="firstlevel">One - Lorem ipsum dolore
<div class="second">
<p class="secondlevel">Two - Lorem ipsum dolore
<p class="secondlevel">Two - Lorem ipsum dolore
</div>
<p class="firstlevel">One - Lorem ipsum dolore
<p class="firstlevel">One - Lorem ipsum dolore
<p class="firstlevel">One - Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore
<p class="firstlevel">One - Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore
<p class="firstlevel">One - Dolor repellendus </p>
</div>
<p class="class_gen">Lorem ipsum dolore
<p class="class_gen">Lorem ipsum dolore</p>

用（.firstlevel，.secondlevel，.thirdlevel等）类包装目标p节点时，文档结构不应更改。

最佳答案

这是我的问题的答案，适用于可能需要相同解决方案或方法的任何人。我修改了上面提到的解决方案。

var jsdom = require("jsdom");
var fs = require("fs");
var jquery = fs.readFileSync("./js/jquery.js", "utf-8");

jsdom.env({
    url: "http://127.0.0.1:8000",
    src: [jquery],
    done: function(errors, window) {
        var $ = window.$;

    $(".firstlevel").first().removeClass("firstlevel").addClass("firstone");
    $(".firstlevel").last().removeClass("firstlevel").addClass("lastone");

    //Working as expected
    $(".firstone").map(function() {
        if (!$(this).prev().hasClass("firstlevel")) {
            return $(this).prev().nextUntil(".lastone").next().addBack();
        }
    }).wrap("<div class='wrap' />");

    //Working as expected
    $(".secondlevel").map(function() {
        {
            return $(this).nextAll(".thirdlevel").addBack();
        }
    }).wrap("<div class='wrap' />");

    //Working as expected
    $(".thirdlevel").map(function() {
        if (!$(this).prev().hasClass("thirdlevel")) {
            return $(this).nextUntil(":not(.thirdlevel)").addBack();
        }
    }).wrap("<div class='wrap' />");

    console.log($('body').html());
}

}）;

这是JSFiddle上的working demo