使用jQuery在段落之间插入图像

Question

我有一个带有几个段落的div和另一个带有一组图像的div。像这样：

<div id="interview">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p>Ased do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Three ipsum dolor sit amet, consectetur adipisicing elit</p>
<p>Four do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Five ipsum dolor sit amet, consectetur adipisicing elit</p>
<p>Six do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div id="images">
<img src="http://placehold.it/100x100/ff0000" class="imgThumb" id="img1" />
<img src="http://placehold.it/100x100/39719c" class="imgThumb" id="img2" />
<img src="http://placehold.it/100x100/eeeeee" class="imgThumb" id="img3" />
<img src="http://placehold.it/100x100/000000" class="imgThumb" id="img4" />
</div>

我想要做的是使用jQuery获取每个图像并在每个第二段后插入它。我只是不够精通jQuery来遍历和遍历div来完成我需要的东西。 ：（

Answer 1

通过“每隔一段，”我假设你的意思是奇数段落（零索引），例如1,3,5，....我假设这是因为你有4个图像和6个段落。如果我认为错了，那么您可以将:odd选择器更改为:nth-child(3n+1)，这将选择第1,4,7段...

$(function ()
{
    var $images = $('#images > img');

    $('#interview > p:odd').each(function (i)
    {
        $(this).after($images.get(i));
    });
});

API文档：

• :odd selector
• .after()

---

哦也

check out the demo →