Question

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

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

如果我理解正确，你需要在第三个之后获得数组中的第一个图像，在第六个之后获得第二个图像等等。

如果是这样，你几乎已经拥有它，只需在吐出图像时放下循环并使用你所依赖的索引。

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，这让我可以很容易地知道我可以将哪一组打开，我可以将其传递给图像数组。

以下是我的快捷方式示例（使用消息而不是图片）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

试试这个：

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

并删除BOTH循环

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

4 个答案: