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

Question

如何将一个 div 标签包裹在文档中的所有 .firSTLevel p 标签周围。基本上为所有第一级 p 节点创建一个父节点，并对所有目标类重复相同的过程:.secondlevel 和 .thirdblevel 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、.thirdelvel 等)类包装目标 p 个节点时，文档结构不应更改。

Answer 1

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

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

});

这是一个working demo在 JSFiddle 上