jquery - 在 WordPress 中的 x 个段落之后自动放置特色图像？

Question

我目前正在使用带有 WordPress 的类型。我的要求是能够在每 2 段之后放置一张图片 - 在类型中上传。

现在，我知道如何从 Types 中提取字段。我不确定的是（也许这是用 Javascript 完成的？）是如何在 2 个段落之后自动放置一个图像，然后在 4 个段落之后自动放置另一个图像，等等。

这可能吗？我非常有限的 jQuery 知识告诉我它可能与 nth-child 选择器或其他什么有关？但这只是一个猜测。

任何帮助将不胜感激。

Answer 1

这是一个如何做到这一点的例子：http: //jsfiddle.net/tkK6y/

假设您有一组图像 URL：

var imgs = ['1.jpg', '2.jpg', '3.jpg'];

还有一个带有n段落的 div：

<div id="theDiv">
    <p>Foo</p>
    <p>Bar</p>
    ...
</div>

您可以遍历每一第二段并在每个段落之后插入图像，如下所示：

var $div = $('#theDiv');
var $paragraphs = $('p:nth-child(2n)', $div);
var n = 0;
$paragraphs.each(function () {
    var $newImage = $('<img src="' + imgs[n] + '" />'); // Creates an img tag
    $newImage.insertAfter(this);  // Inserts the img after the current paragraph
    n++;
});

Answer 2

有一种方法可以在没有 jquery 的情况下做到这一点，只使用 php 并且会做一个自定义循环，您将在其中定义一个递增变量，并且您将使用一个基本的数学函数每隔一个帖子显示一个结果，如下所示：

$x = 1; while (have_posts()) : the_post();
if (($x % 2) == 1 && $x != 1)   {
// Display your custom image here
}

$x++; endwhile;