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

Question

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

我根据论坛里的类似问题尝试了几种方法都没有成功。

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

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

下面是我改编自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 节点时，文档结构不应更改类。

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

});

这是 JSFiddle

上的 working demo

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

How to wrap a group of html elements in a div

html

javascript

css

cheerio