Question

是否有任何方法可以根据特定课程后的金额DOM来修改div？

例如，如果我有一个名为{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元素，但它们应该保持原样。 / p>

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

Answer 1

如果我对您的理解正确（想要使用JS或PHP解决方案），则需要编写条件块来处理此问题。

注意：不用说，可以通过仅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>

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

Answer 2

有多种方法可以实现这一目标。我可能会添加另一个类名称，以便您可以轻松识别div的组，并区分父和子div。这是否可以帮助您到达目的地？基本上找到连续的子级数，然后将该数字连接到类名中。

var x = document.getElementsByClassName('row')[0].childElementCount
var element = document.getElementsByClassName('row')[0];
    element.classList.add(`col-1-of-${x}`);

Answer 3

.row {
  width: 100%;
  display:flex;
  flex-grow: 1;
  margin-bottom: 2px;
}
.col {
  float:left;
  background: rgba(255,0,0,.2);
  text-align: center;
  margin-right: 2px;
}

.col:first-child:nth-last-child(1),
.col:first-child:nth-last-child(1) ~ .col{
    width: calc(100% / 1);
}

.col:first-child:nth-last-child(2),
.col:first-child:nth-last-child(2) ~ .col{
    width: calc(100% / 2);
}

.col:first-child:nth-last-child(3),
.col:first-child:nth-last-child(3) ~ .col{
    width: calc(100% / 3);
}

.col:first-child:nth-last-child(4),
.col:first-child:nth-last-child(4) ~ .col{
    width: calc(100% / 4);
}

.col:first-child:nth-last-child(5),
.col:first-child:nth-last-child(5) ~ .col{
    width: calc(100% / 5);
}

<div class="row">
  <div class="col">1</div>
</div>

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
</div>

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>

<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</div>

这与float一起使用，可以在sass / scss mixin中使用，以自动创建代码。还应该有一个弹性解决方案，但我目前没有手头

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

3 个答案: