提问人:Osvaldas Žadeikis 提问时间:7/24/2021 更新时间:7/24/2021 访问量:24
为数组中的每两个 div 添加两个相同的图像
Add two same images for every two divs in array
问:
我有一个图像数组和一个 div 数组。我想为前两个 div 添加相同的图像,并为第 3 和第四个 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]);
答:
1赞
Rory McCrossan
7/24/2021
#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>
评论
0赞
Osvaldas Žadeikis
7/24/2021
太完美了。非常感谢。
0赞
Always Helping
7/24/2021
@OsvaldasŽadeikis您是否对这个答案感到满意。请考虑通过单击侧面的绿色复选标记来接受。这样将来会对其他人有所帮助。如何接受答案:meta.stackexchange.com/a/5235
上一个:显示更多并切片动态 div
评论
for
allDivs.slice(i*2, i*2+2).append(images[i])