Одинаковая высота div в 2 разных секциях по :nht-child

425

29 декабря 2017, 02:26

Как передать значение height из .rem в .tet - чтобы .rem - height 1 строки совпадал со значением .tet - height 1 строки и т.д. - использую псевдоселектор :nht-child.

То есть передать значение всех .rem - height в .tet - и сохранить порядок строк.

Мало опыта. Понимаю что через цикл - но не могу понять как именно.

Спасибо.

<div class="rem" style="height: 20px;"></div>
<div class="rem" style="height: 40px;"></div>
<div class="rem" style="height: 10px;"></div>
<div class="rem" style="height: 60px;"></div>
<div class="tet"></div>
<div class="tet"></div>
<div class="tet"></div>
<div class="tet"></div>

Answer 1

Если через цикл, то можно так:

var arr_rem = document.getElementsByClassName("rem")
var arr_tet = document.getElementsByClassName("tet")
for(var i = 0; i < arr_rem.length; i++){
    arr_tet[i].style.height = arr_rem[i].style.height
}

Answer 2

Еще вариант

'use strict'; 
 
var div1 = document.querySelectorAll('.div1'),  
  div2 = document.querySelectorAll('.div2'); 
 
for (var i = 0; i < div1.length; i++) {   
  div2[i].style.height = div1[i].offsetHeight + 'px'; 
}

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.divs { 
  display: flex; 
  justify-content: space-between; 
  margin: 15px auto; 
  padding: 15px; 
} 
 
.divs > div { 
  background: #ccc; 
  color: #fff; 
  margin-bottom: 5px; 
  width: calc(25% - 10px); 
  margin-left: 5px; 
  margin-right: 5px; 
  padding: 7px; 
} 
 
.divs:nth-of-type(2) > div { 
  background: #00f; 
}

<div class="divs"> 
  <div class="div1" style="height: 50px;">div 1</div> 
  <div class="div1" style="height: 80px;">div 2</div> 
  <div class="div1" style="height: 30px;">div 3</div> 
  <div class="div1" style="height: 60px;">div 4</div> 
</div> 
<div class="divs"> 
  <div class="div2">div 1</div> 
  <div class="div2">div 2</div> 
  <div class="div2">div 3</div> 
  <div class="div2">div 4</div> 
</div>

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как передавать дополнительные параметры массивом в fetch?

Есть экшн(использую react+redux)например:

498

javascript

Добавление элементов в разметку

Как с помощью JS динамически добавлять новые контроллы (input, div и тд) ? Пробую так :

248

javascript

Как передать arguments вложенной функции?

Нужно сделать функцию, которая принимает две функции (простые матоперации), объединяет их в одну и возвращает её

360

javascript

PhpStorm не знает переменную currentScript — «Unresolved variable currentScript». Как сделать так, чтобы он знал ее и не выдавал Warning'ов?

PhpStorm не знает переменную currentScript — «Unresolved variable currentScript»Как сделать так, чтобы он знал ее и не выдавал Warning'ов? Вот скриншот:

301