javascript - 如果数组长度为奇数或偶数，则将元素的宽度从 50% 更改为 100%

Question

我想在我的页面上显示一些元素(soundcloud 小部件)。

根据它们是奇数还是偶数，它们应该有50% 或100% 宽度.

基本上我要满足的规则是:

-如果只有一个元素，将其设为100%宽度

-如果元素不止一个，且数组长度为偶数，则让所有元素占50%

-如果数组的长度是奇数，则将除最后一个以外的所有宽度设为 50%，将最后一个宽度设为 100%。

我正在使用哈巴狗，但不知道该怎么做。甚至 flexbox 也能帮上忙？

这是我的代码，w-50 类现在将元素设置为 50%:

    each link in soundcloudEmbedableLinks
      .pb4.w-50.dib.pa2!=link

这就是它现在的样子，全部设置为 50%.. 但正如我所说，我确实希望它符合我上面所说的规则。

谢谢

Answer 1

CSS:

.myBox {
    width:50%;
}
.myBox:last-child {
    width:100%;
}
.myBox:nth-child(even) {
    width:50%;
}

第一条规则将默认值设置为 50%，第二条规则将最后一个 child 设置为 100%，第三条规则将覆盖第二条规则并将最后一个规则设置回 50%(如果是偶数)。这意味着除了最后一个(如果是奇数)以外的所有框都将是 50%。