如何解决jQuery-在新div中包装多个标签子类
我想使用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();
,但我无法获得相同的结果。
解决方法
如果您的标记始终具有完全相同的顺序,则可以执行如下循环:
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。