以特定间隔将图像插入 DOM

Question

我在<section id="interview"> 中有一系列重复的<p class="question"> 和<p class=answer>。在每第三个答案之后，我想插入一个图像，其路径名存储在一个数组中：

array = ['../../directory/file-1.jpg', '../../directory/file-2.jpg];

到目前为止，我有：

var interval = 3;
var questionCount = 9;
var imageCount = array.length;
var interview = $('#interview');
var self;

for (var i = interval; i < questionCount; i+=interval) {
    interview.find('p.answer:nth-of-type('+i+')').each(function() {
        self = $(this);
        for (var p = 0; p < imageCount; p++) {
            self.after('<img src="'+array[i]+'">');
        }
    });
}

当然，这是给我数组中每个间隔的所有图像，而不是第一个间隔的第一张图像，第二个间隔的第二张图像，依此类推。我需要如何更改它？

Answer 1

只需删除内部的for 循环。

var j=0;
for (var i = interval; i < questionCount; i+=interval) {
    var ans = interview.find('.answer').eq(i);
    ans.after('<img src="' + array[j] + '">');
    j++;
}

Answer 2

如果我理解正确，您希望在第三个之后获得数组中的第一张图像，在第六个之后获得第二张图像，等等。

如果是这样，您几乎已经完成了，只需在吐出图像时放下循环并使用您所在的 p 的索引。

var interval = 3;
var questionCount = 9;
var imageCount = array.length;
var interview = $('#interview');
var self;

for (var i = interval; i < questionCount; i+=interval) {
    interview.find('p.answer:nth-of-type('+i+'n)').each(function() {
        self = $(this);
        self.after('<img src="' + images[i] + '">');
    });
}

如果您使用更多的 jQuery，实际上可以显着简化您的代码。

var images = []; // images go here
var interval = 3;
$('#interview:nth-of-type(' + interval + ')').each(function (index) {
    $(this).after('<img src="' + images[index] + '">');
});

请注意，我使用了 each() 函数的 index，它让我很容易知道我在哪一组 3，我可以将其传递给 images 数组。

这是我的快捷方式示例（使用消息而不是图像）：

const messages = [0,1,2,3,4,5];
const interval = 3;

$('p:nth-of-type(' + interval + 'n)').each(function (index) {
  $(this).after('<p>' + messages[index] + '</p>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>

Answer 3

试试这个：

interview.find('p.answer:nth-of-type('+interval+')').each(function(index) {
        self = $(this);
        $('<img>').attr('src', array[index]).after(self)
    });

并删除两个循环

Answer 4

获取答案并使用迭代器遍历其中的每三分之一：

var answers = interview.find('p.answer:nth-of-type('+i+')');
for (var answerIndex = 2; (answerIndex < answers.length) && (((answerIndex + 1) / 3) < array.length); answerIndex += 3) {
    $(answers[answerIndex]).after('<img src="array['+((answerIndex + 1) / 3)+']">');
}