Javascript 从变量中选择前3个值，然后选择下3个值，以此类推

我有一个带有图像的变量。我也有3个div的，我想把图像

var images = [
'dali.jpg',
'illusionisme.png',
'impresionisme.jpg',
'popart.jpg',
'abstracter.jpg',
'abstrat.jpg',
'concept.jpg',
'fingerpaint.jpg',
'flowers.jpg',
'graffiti.jpg',
'groovy.jpg',
'skelly.jpg',
'vangogh.jpg'
]

通过使用此代码，每个div都会得到一个随机图像，这很好，但不是我想要的。如何使用jQuery将前3个图像放入3个div中，然后将第二个3个图像放入div中

$(".art").click(function(){
$(".art").each(function(){
    $(this).find("img").remove();
    $(this).prepend('<img src="assets/images/' + images[Math.floor(Math.random()*images.length)] + '">');
});

})

---

不确定你的意思，如果这不是你想要的，请详细说明

当代码现在只给出文本时，您可以将该文本包装为一个文本，以提供图像

var images = [
'dali.jpg',
'illusionisme.png',
'impresionisme.jpg',
'popart.jpg',
'abstracter.jpg',
'abstrat.jpg',
'concept.jpg',
'fingerpaint.jpg',
'flowers.jpg',
'graffiti.jpg',
'groovy.jpg',
'skelly.jpg',
'vangogh.jpg'];

$(".art").click(function () {
   $(this).html(getNext3()); //images[Math.floor(Math.random()*images.length)]);
 });



 $('#startLoop').click(function () {
  loopImages();
 });

function loopImages(){
 var art = $('.art');
 art.fadeOut(1000, function () {
     art.html(getNext3()).fadeIn(1000, function() { loopImages(); });
 });
 }
var counter = 0;

function getNext3() {
  var imgs = "";
  //img src=...
  for (i = 0; i < 3; i++) {
      imgs += ' ' + images[counter];
      counter++;
  }
  return imgs;
 }

更新 一次加载3到3个div

---

您可以跟踪当前图像索引，然后通过每次单击添加数字以增加索引

html

---

我不太清楚你的意思。。你能给出一个你想看到的html结构的例子吗？前3个每个都在一个div中，下3个在哪个div o.o中？很抱歉我的文章不清楚，我制作了一个JSFIDLE，希望它能澄清一些问题。我有3个div。这些div包含从变量的前3个中提取的图像。当用户单击.art div时，我希望删除当前图像并用变量中的下3个图像替换它们。这是正确的方向。我喜欢从images变量中选择接下来3个值的方式。但是我想将每个结果存储在不同的div中。第一个变量result=第一个div。第二个result=第二个div第三个result=第三个div第四个result=第一个div Fith result=第二个div第六个result=第三个div，以3为一组，但在每个div中都有另一个结果。如果这是有意义的。我添加了一点你的小提琴，因为你可以看到它在每个div中放置相同的结果，但我希望下一个结果在下一个div中。。。

var images = [
'dali.jpg',
'illusionisme.png',
'impresionisme.jpg',
'popart.jpg',
'abstracter.jpg',
'abstrat.jpg',
'concept.jpg',
'fingerpaint.jpg',
'flowers.jpg',
'graffiti.jpg',
'groovy.jpg',
'skelly.jpg',
'vangogh.jpg'];

$(".art").click(function () {
   $(this).html(getNext3()); //images[Math.floor(Math.random()*images.length)]);
 });



 $('#startLoop').click(function () {
  loopImages();
 });

function loopImages(){
 var art = $('.art');
 art.fadeOut(1000, function () {
     art.html(getNext3()).fadeIn(1000, function() { loopImages(); });
 });
 }
var counter = 0;

function getNext3() {
  var imgs = "";
  //img src=...
  for (i = 0; i < 3; i++) {
      imgs += ' ' + images[counter];
      counter++;
  }
  return imgs;
 }

function setNext3() {
 var imgs = "";
 //img src=...
 for (i = 0; i < 3; i++) {
    imgs = images[counter];
    console.log(imgs);
    console.log(i);
    $("div.art:nth-child(" + (i + 1) + ")").html(imgs);
    console.log($("div.art:nth-child(" + i + ")"));
    counter++;
 }

}

<div class="art">
    <img data-imageindex="0" src="" />
</div>
<div class="art">
    <img data-imageindex="1" src="" />
</div>
<div class="art">
    <img data-imageindex="2" src="" />
</div>

var artLength = $(".art").length;
$(".art").click(function () {
    $(".art").each(function () {
        var $image = $(this).find("img");
        var nextImageIndex = $image.data("imageindex") + artLength;
        if (nextImageIndex >= images.length) {
            nextImageIndex -= images.length;
        }
        $image.data("imageindex", nextImageIndex).attr("src",
            "assets/images/" + images[nextImageIndex]);
    });
});