Jquery-将多个标记的子类包装在新的div中

Question

我想使用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>);

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

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