以特定间隔将图像插入 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

试试这个：

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

并删除两个循环

Answer 2

只需删除内部 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 3

如果我没理解错的话，你希望在第三张之后有数组中的第一张图片，在第六张之后有第二张图片，依此类推

如果是这样，您就快搞定了，只需在吐出图像时放弃循环并使用您所在的 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，我可以将其传递给图像数组。

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

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 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)+']">');
}

以特定间隔将图像插入 DOM

Inserting images into DOM at specific intervals

javascript

jquery

for-loop

nested-loops