为数组中的每两个div添加两个相同的图像
为数组中的每两个div添加两个相同的图像
提问于 2021-07-24 00:44:22
我有一个图像数组和一个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]);Stack Overflow用户
回答已采纳
发布于 2021-07-24 00:49:35
要动态地实现该逻辑，您可以使用遍历images数组的forEach()循环。从那里，您可以使用循环的当前索引从$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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68502564
复制相关文章
相似问题
腾讯云开发者
