在段落列表中插入图片列表

Question

我有一张图片列表，我想在每个段落后插入一张图片。有时候我会比有时更多的段落有更少的图像。如何通过img元素循环来在段落后面插入它们，并且如果图像太多，请将它们留在原来的位置？

$(".img").insertAfter("p"); 

没有内容的结构是这样的：

前：

<div id="wrap"> 
    <h2></h2> 
    <p></p> 
    <h2></h2> 
    <p></p> 
    <h2></h2> 
    <p></p> 
</div> 

<img class="img" /> 
<img class="img" /> 
<img class="img" /> 
<img class="img" /> 
<img class="img" /> 
<img class="img" /> 
<img class="img" /> 
<img class="img" /> 

结果：

<div id="wrap"> 
    <h2></h2> 
    <p></p> 
    <img class="img" /> 
    <h2></h2> 
    <p></p> 
    <img class="img" />   
    <h2></h2> 
    <p></p> 
    <img class="img" /> 
</div> 
<img class="img" /> 
<img class="img" /> 
<img class="img" /> 
<img class="img" /> 
<img class="img" /> 

Answer 1

你可以使用.after()方法：

var $img = $('.img'); 

$('#wrap p').after(function(i) { return $img.eq(i); }); 

http://jsfiddle.net/a7tchk5r/