循环遍历项目，分别针对前3个和最后一个项目

Question

是否有更好的方法来编写这个for循环?

1. 我基本上是通过div的集合循环。(div的数量可以动态地增加和减少，所以它永远不是一个固定的数字)。
2. 如果集合的长度大于4，我想设置前3个项目的弹性样式。我想在剩下的项目上设置一个宽度，从第四个项目开始。
3. 如果集合的长度小于4，我想在所有项目上设置flex样式。

这在最基本的级别上工作，但想知道是否有更聪明的方法来写这个?

let divCount = document.getElementsByClassName("luggage-tile-wrapper active");
for (let i = 0; i < divCount.length; i++) {
if (divCount.length > 3) {
for (let i = 0; i < 3; i++) {
divCount[i].style.flex = "1 0 22.2%";
};
for (let i = 3; i < divCount.length; i++) {
divCount[i].style.width = "145px";
};
} else {
for (let i = 0; i < divCount.length; i++) {
divCount[i].style.flex = "1 0 22.2%";
};
};
}

谢谢,

Answer 1

执行两个循环，一个用于前3个，另一个用于其余的。如果div少于3个，第二个循环将不执行任何操作。

let first3 = Math.min(3, divCount.length); // don't go past the end if less than 3
for (let i = 0; i < first3; i++) {
divCount[i].style.flex = "1 0 22.2%";
}
for (let i = 3; i < divCount.length; i++) {
divCount[i].style.width = "145px";
}

Answer 2

所以你总是想做

divCount[i].style.flex = "1 0 22.2%";

为前3项

对于你想要的其他条目

divCount[i].style.width = "145px";

就是这个

for (let i = 0; i < divCount.length; i++) {
if (i < 3) {
divCount[i].style.flex = "1 0 22.2%";
} else {
divCount[i].style.width = "145px";
}
}

Answer 3

我知道你已经接受了一个答案——我意识到我没有所有的信息——但似乎你可以完全在css中实现这一点，而不需要任何javascript。

.container {
display: flex;
flex-wrap: wrap;
}
.container > * {
flex: 1 0 22.2%;
background: skyblue;
}
.container > :nth-child(1n + 4) {
background: pink;
width: 145px;
}

<div class="container">
<div class="luggage-tile-wrapper active">item</div>
<div class="luggage-tile-wrapper active">item</div>
<div class="luggage-tile-wrapper active">item</div>
<div class="luggage-tile-wrapper active">item</div>
<div class="luggage-tile-wrapper active">item</div>
<div class="luggage-tile-wrapper active">item</div>
<div class="luggage-tile-wrapper active">item</div>
</div>