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

Например, если у меня есть div с классом с именем row, и после этого у меня есть 4 элемента div. Есть ли способ изменить эти 4 класса элементов div в зависимости от количества элементов div ?

Код:

 {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-1-of-4"{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div class="col-1-of-4"{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div class="col-1-of-4"{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div class="col-1-of-4"{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Другой пример У меня снова есть строка класса div, но на этот раз я хочу, чтобы после этого было 3 элемента div, тогда я бы хотел, чтобы эти элементы div имели класс с именем col-1-of-3, а не col-1-of-4. Если после этого у меня будет только 2 элемента div, тогда класс col-1-of-2, а если только один элемент div, то вообще никакого класса.

Код:

 {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-1-of-3"{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div class="col-1-of-3"{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div class="col-1-of-3"{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

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

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

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

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

Вот пример (с использованием jQuery) с 3 наборами row с разными дочерними элементами (2, 3, 4):

 $(function() { var $rows = $(".row"); $rows.each(function() { $row = $(this); var $children = $("{amp}gt;div", $row), total = $children.size(); $children.addClass("col-1-of-"   total); }); }); 
 .row { border: 1px solid #000; margin: 10px; } .row {amp}gt; 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; } 
 {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; some content {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

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

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

 var x = document.getElementsByClassName('row')[0].childElementCount var element = document.getElementsByClassName('row')[0]; element.classList.add(`col-1-of-${x}`); 
 .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); } 
 {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col"{amp}gt;1{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col"{amp}gt;1{amp}lt;/div{amp}gt; {amp}lt;div class="col"{amp}gt;2{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col"{amp}gt;1{amp}lt;/div{amp}gt; {amp}lt;div class="col"{amp}gt;2{amp}lt;/div{amp}gt; {amp}lt;div class="col"{amp}gt;3{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col"{amp}gt;1{amp}lt;/div{amp}gt; {amp}lt;div class="col"{amp}gt;2{amp}lt;/div{amp}gt; {amp}lt;div class="col"{amp}gt;3{amp}lt;/div{amp}gt; {amp}lt;div class="col"{amp}gt;4{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col"{amp}gt;1{amp}lt;/div{amp}gt; {amp}lt;div class="col"{amp}gt;2{amp}lt;/div{amp}gt; {amp}lt;div class="col"{amp}gt;3{amp}lt;/div{amp}gt; {amp}lt;div class="col"{amp}gt;4{amp}lt;/div{amp}gt; {amp}lt;div class="col"{amp}gt;5{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

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