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 中包装多个标签子类的主要内容,如果未能解决你的问题,请参考以下文章