使用 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 →