Изменить DOM в зависимости от количества делений после определенного класса

Question

Есть ли способ изменить DOM на основе суммы div после определенного класса?

Например, если у меня есть div с классом, называемым строкой, и после этого у меня есть 4 элементы div.Есть ли способ изменить класс элементов 4 div в зависимости от количества 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>

Такжеу этих элементов div с классами, называемыми col-1-of-4, col-1-of-3 и col-1-of-2, есть свои собственные элементы div, но они должны оставаться такими, какими они были.

Можно ли достичь с помощью JavaScript или PHP?

Answer 1

Есть несколько способов добиться этого.Возможно, я бы добавил другое имя класса, чтобы вы могли легко идентифицировать группы элементов div и различать родительские и дочерние элементы div.Помогает ли это вам добраться туда, куда вы идете?В основном найдите количество детей в строке, а затем объедините это число в имя класса.

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

Answer 2

.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>

, так что это с плавающей точкой, может быть использовано в sass / scss mixin для автоматического создания кода.должно быть и гибкое решение, но у меня его сейчас нет под рукой

Answer 3

Вам нужно написать условные блоки, чтобы справиться с этим, если я вас правильно понимаю (хочу решение JS или PHP).

Примечание: само собой разумеется, что подобное решение может быть завершено с помощьюПодход только для CSS, как описано здесь: Может ли CSS определить количество дочерних элементов, которое имеет элемент?

Вот пример (с использованием 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>

При запуске фрагмента необходимо проверить элементы.Я добавил границы, чтобы вы могли видеть разницу.