javascript - jQuery - 将类添加到不同数量的 div

Question

我是 Stackoverflow 的新手，我想知道是否有人可以帮助我解决这种情况:

我想要不同的 block (“.item-wrapper”)，其中包含元素(“.item”)。但是 block 内的元素需要可变宽度。

例子: 如果 block 包含 4 个元素，则元素需要 25% 的宽度。
如果 block 包含 5 个元素，则元素需要 20% 的宽度。
如果 block 包含 6 个元素，则元素需要 16.66.....% 的宽度。
如果 block 包含 7 个元素，则元素的宽度需要 14.28.....%。

我希望有人能帮我解决这个问题。

我这里有一个 JSfiddle

jsfiddle.net/carloc/4cjwqpf4/2/

谢谢!

Answer 1

你不需要 javascript...CSS 可以为你做。

   .item-wrapper {
      display: table;
      width: 100%;
    }
    .item-wrapper .item {
      display: table-cell;
    }

.item-wrapper {
  display: table;
  width: 100%;
}
.item-wrapper .item {
  display: table-cell;
  width: auto;
  border: 1px solid red;
  color: red;
  height: 50px;
  padding: 10px;
}
.item-wrapper .item:nth-child(odd) {
  border-color: blue;
  color: blue;
}

<div class="item-wrapper">
  <!-- 4 items -->
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
</div>

<div class="item-wrapper">
  <!-- 5 items -->
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
</div>

<div class="item-wrapper">
  <!-- 6 items -->
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
</div>

<div class="item-wrapper">
  <!-- 7 items -->
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
</div>