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

【问题标题】：How to wrap a group of html elements in a div如何将一组html元素包装在一个div中
【发布时间】：2017-03-16 03:26:32
【问题描述】：

如何将 div 标签包裹在文档中的所有 .firstlevel p 标签周围。基本上为所有第一级 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 节点时，文档结构不应更改。

【问题讨论】：

首先：将
包装在另一个

中是不符合语义的。要包装元素，请使用 jQuery.each 和您需要的选择器
请阅读How to Ask。关键词：“搜索和研究”和“解释......任何阻碍你自己解决的困难”。
我已经调整了我的问题以询问我需要实现什么。

标签： javascript html css cheerio

【解决方案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

【讨论】：