javascript - 根据特定类后的 div 数量修改 DOM

Question

有没有办法在特定类之后根据 div 的数量修改 DOM？

例如，如果我有一个带有名为 row 的类的 div，然后我有 4 个 div 元素。有没有办法根据 div 元素的数量来更改这些 4 div 元素类？

代码:

<div class="row">
        <div class="col-1-of-4">
          some content
        </div>
        <div class="col-1-of-4">
          some content
        </div>
        <div class="col-1-of-4">
          some content
        </div>
        <div class="col-1-of-4">
          some content
        </div>
      </div>

另一个例子我有一个 div 类行，但这次我想要 3 个 div 元素之后，然后我希望这些 div 元素有一个名为 col-1-of-3 的类，而不是 col-1-of -4。如果在那之后我只有 2 个 div 元素，那么类 col-1-of-2 如果只有一个 div 元素，那么根本没有类。:

代码:

<div class="row">
        <div class="col-1-of-3">
          some content
        </div>
        <div class="col-1-of-3">
          some content
        </div>
        <div class="col-1-of-3">
          some content
        </div>
      </div>

此外，这些具有名为 col-1-of-4、col-1-of-3 和 col-1-of-2 的类的 div 元素内部也有自己的 div 元素，但它们应该保持原样。

是否可以用JavaScript或PHP来实现？

Answer 1

如果我对您的理解正确(想要 JS 或 PHP 解决方案)，您将需要编写条件 block 来处理此问题。

注意:不用说，类似的解决方案可以使用纯 CSS 方法完成，如下所述:Can CSS detect the number of children an element has?

这是一个示例(使用 jQuery)，包含 3 组 row，具有不同的子级 (2, 3, 4):

$(function() {
  var $rows = $(".row");
  $rows.each(function() {
    $row = $(this);
    var $children = $(">div", $row),
      total = $children.size();

    $children.addClass("col-1-of-" + total);
  });
});

.row {
  border: 1px solid #000;
  margin: 10px;
}

.row > div {
  margin: 10px;
}

.row .col-1-of-2 {
  border: 1px solid #f00;
}

.row .col-1-of-3 {
  border: 1px solid #0f0;
}

.row .col-1-of-4 {
  border: 1px solid #00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div>
    some content
  </div>
  <div>
    some content
  </div>
</div>

<div class="row">
  <div>
    some content
  </div>
  <div>
    some content
  </div>
  <div>
    some content
  </div>
</div>

<div class="row">
  <div>
    some content
  </div>
  <div>
    some content
  </div>
  <div>
    some content
  </div>
  <div>
    some content
  </div>
</div>

运行代码段时，您必须检查元素。我添加了边框，以便您可以看到差异。