Jquery - 在新 div 中包装多个标签子类

Posted

技术标签:

【中文标题】Jquery - 在新 div 中包装多个标签子类【英文标题】:Jquery - Wrap multiple tag child class inside new div 【发布时间】:2021-02-16 18:24:09 【问题描述】:

我想使用 jQuery 将标签内的多个类包装到一个新的 div 中,这是 html 的情况:

<div class="article">
    <div>
        <h1>Title 1</h1>
    </div>
    <div>
        <img>
    </div>
    <div>
        <h1>Title 2</h1>
    </div>
    <div>
        <img>
    </div>
    <div>
        <h1>Title 3</h1>
    </div>
    <div>
        <img>
    </div>
</div>

结果:

<div class="article">
    <div class="img-div">
        <div>
            <h1>Title 1</h1>
        </div>
        <div>
            <img>
        </div>
    </div>
    <div class="img-div">
        <div>
            <h1>Title 2</h1>
        </div>
        <div>
            <img>
        </div>
    </div>
    <div class="img-div">
        <div>
            <h1>Title 3</h1>
        </div>
        <div>
            <img>
        </div>
    </div>
</div>

这是我尝试的 jQuery 代码:

$(".article").children("div h1, div img).wrap("<div class='img-div'"></div>);

我正在使用 jQuery wrap(); wrapAll();,但我无法得到相同的结果。

【问题讨论】:

【参考方案1】:

如果您的标记始终具有完全相同的顺序,您可以执行如下循环:

var $set = $('.article').children();    
for(var i=0, len = $set.length; i < len; i+=2)
    $set.slice(i, i+2).wrapAll('<div class="img-div">');
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="article">
    <div>
        <h1>Title 1</h1>
    </div>
    <div>
        <img>
    </div>
    <div>
        <h1>Title 2</h1>
    </div>
    <div>
        <img>
    </div>
    <div>
        <h1>Title 3</h1>
    </div>
    <div>
        <img>
    </div>
</div>

【讨论】:

以上是关于Jquery - 在新 div 中包装多个标签子类的主要内容,如果未能解决你的问题,请参考以下文章

如何在jQuery中包装div?

jQuery制作带有多个参数的div标签如何在里面使用引号

从多个因素之一在 facet_grid 中包装文本

Jquery选择器

在图例元素中包装标签元素

如何在div中包装由InsertTable命令生成的表