为数组中的每两个 div 添加两个相同的图像

Posted 2023-05-09

【中文标题】为数组中的每两个 div 添加两个相同的图像

【英文标题】：Add two same images for every two divs in array

【发布时间】：2021-09-30 18:44:44

【问题描述】：

我有一组图像和一组 div。我想为前两个 div 添加相同的图像，并从数组中为第三个和第四个 div 添加第二个图像，然后重复几次。 下面的代码可以完成这项工作，但有没有更简单的方法：

var images = [image1, image2, image3, image4,.....];
var allDivs = $('.div-images');

allDivs.slice(0, 2).append(images[0]);
allDivs.slice(2, 4).append(images[1]);
allDivs.slice(4, 6).append(images[2]);
allDivs.slice(6, 8).append(images[3]);
allDivs.slice(8, 10).append(images[4]);

【问题讨论】：

很确定你可以用for循环来做到这一点...allDivs.slice(i*2, i*2+2).append(images[i])

【参考方案1】：

要动态实现逻辑，您可以使用forEach() 循环遍历images 数组。从那里，您可以使用循环的当前索引从该索引处的$allDivs 检索元素，以及它的后续兄弟，然后将值附加到它们两者。试试这个：

var images = ['image1', 'image2', 'image3', 'image4', 'image5'];
var $allDivs = $('.div-images');

images.forEach((image, i) => $allDivs.eq(i * 2).next().addBack().append(image));

/* CSS for demo purposes only, to make the grouping clearer */
.div-images  
  border: 1px solid #C00;
  border-bottom: 0;
  padding: 5px;


.div-images:nth-child(odd) 
  margin-bottom: 10px;
  border-bottom: 1px solid #C00;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-images"></div>
<div class="div-images"></div>
<div class="div-images"></div>
<div class="div-images"></div>
<div class="div-images"></div>
<div class="div-images"></div>
<div class="div-images"></div>
<div class="div-images"></div>
<div class="div-images"></div>
<div class="div-images"></div>

【讨论】：

太完美了。非常感谢。

@OsvaldasŽadeikis 如果您对这个答案感到满意。请考虑通过单击侧面的绿色复选标记来接受。这样这将有助于将来的其他人。如何接受答案：meta.stackexchange.com/a/5235