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

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

javascript html css

Javascript 如何在div中包装一组html元素,javascript,html,css,cheerio,Javascript,Html,Css,Cheerio,如何在文档中的所有.firstlevel p标记周围包装一个div标记。基本上为所有firstlevel p节点创建父节点，并对所有目标类重复相同的过程：.secondlevel和.thirdlevel p节点我在论坛上尝试了一些基于类似问题的方法，但没有成功当前代码生成的文档不是所需的格式。对于当前文档，div围绕着连续的p.firstlevel节点，而不是围绕着所有的p.firstlevel节点，但是我需要div从文档的开始到结束包装所有的p.firstlevel节点。 p.secon

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

我在论坛上尝试了一些基于类似问题的方法，但没有成功

当前代码生成的文档不是所需的格式。对于当前文档，div围绕着连续的p.firstlevel节点，而不是围绕着所有的p.firstlevel节点，但是我需要div从文档的开始到结束包装所有的p.firstlevel节点。 p.secondlevel、p.thirdlevel均已正确包装

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

以下是我改编自的代码：

$（“.firstlevel”）
.filter（函数（）{
return！$（this.prev（）.is（“.secondlevel”）；
})
.map（函数（）{
返回$（this.nextUntil（“.firstlevel”）.andSelf（）；
}).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>

Lorem ipsum dolore
一级-阿斯佩里奥雷斯的Quibusdam
一级-Lorem ipsum dolore
Lorem ipsum dolore
一级-Lorem ipsum dolore
两级
三分之一，共三分之一
三级
Lorem ipsum dolore
Lorem ipsum dolore
两级
三级
三级
Lorem ipsum dolore
一级-Lorem ipsum dolore
两级
两级
一级-Lorem ipsum dolore
一级-Lorem ipsum dolore
一级-Lorem ipsum dolore
Lorem ipsum dolore
一级-Lorem ipsum dolore
Lorem ipsum dolore
一种驱虫剂
Lorem ipsum dolore
Lorem ipsum dolore

期望输出

<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>

Lorem ipsum dolore
一级-阿斯佩里奥雷斯的Quibusdam
一级-Lorem ipsum dolore
Lorem ipsum dolore
一级-Lorem ipsum dolore
两级
三分之一，共三分之一
三级
Lorem ipsum dolore
Lorem ipsum dolore
两级
三级
三级
Lorem ipsum dolore
一-Lorem ipsum dolore
两级
两级
一级-Lorem ipsum dolore
一级-Lorem ipsum dolore
一级-Lorem ipsum dolore
Lorem ipsum dolore
一级-Lorem ipsum dolore
Lorem ipsum dolore
一种驱虫剂
Lorem ipsum dolore
Lorem ipsum dolore

使用（.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());
}

var jsdom=require（“jsdom”）；
var fs=要求（“fs”）；
var jquery=fs.readFileSync（“./js/jquery.js”，“utf-8”）；
jsdom.env({
url:“http://127.0.0.1:8000",
src:[jquery]，
完成：函数（错误，窗口）{
var$=窗口。$；
$（“.firstlevel”）.first（）.removeClass（“firstlevel”）.addClass（“firstone”）；
$（.firstlevel”）.last（）.removeClass（“firstlevel”）.addClass（“lastone”）；
//如期工作
$（“.firstone”）.map（函数（）{
if（！$（this.prev（）.hasClass（“第一级”））{
返回$（this.prev（）.nextUntil（“.lastone”）.next（）.addBack（）；
}
}).wrap（“”）；
//如期工作
$（“.secondlevel”）.map（函数（）{
{
返回$（this.nextAll（“.thirdlevel”）.addBack（）；
}
}).wrap（“”）；
//如期工作
$（“.thirdlevel”）.map（函数（）{
if（！$（this.prev（）.hasClass（“thirdlevel”））{
返回$（this.nextUntil（“：not（.thirdlevel）”）.addBack（）；
}
}).wrap（“”）；
log（$（'body'）.html（））；
}

}))

首先，这里有一个关于JSFiddle的例子：在另一个中包装不是语义。要包装元素，请使用jQuery.each和所需的选择器，请阅读。关键短语：“搜索、研究”和“解释……任何阻碍你自己解决问题的困难”。我调整了我的问题，询问我需要实现什么。

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