Почему не мой все div внутри div получает высоту firstChild

Question

Я хочу, чтобы все мои высоты div равны первому ребенку внутри div здесь У меня есть три div p , p2 , p3, которые находятся внутри другого div, называемого (класс) r, я хочу, чтобы мой p2 , p3 такой же высоты до p.

HTML

<div> 
    <div class="r"> 
    <div class="p">fgdsgs</div> 
    <div class="p2">sdgdfg</div> 
    <div class="p3">sdgdfg</div> 
    </div> 
</div> 

CSS

.p,.p2,.p3{ 
    display:inline-block; 
    width:80px; 
} 
.p{ 
    height:50px; 
} 

JS

var firstChild = document.querySelector(".r:first-child"); 
var descendant = firstChild.querySelectorAll(".p, .p2,.p3"); 

[].forEach.call(descendant, function(itm){ 
    itm.style.backgroundColor = "green"; 
    var ch = document.getElementsByClassName("p").clientHeight; 
    for(var i = 0 ;i < ch.length; i++){ 
    itm.style.height = ch[i] + "px"; 
    } 
}); 

Demo - https://jsfiddle.net/104sn7mu/13/

Edit 1

петли добавлены

Answer 1

вы можете использовать переменную, которую вы сделали ранее, как это:

var firstChild = document.querySelector(".r:first-child"); 
var descendant = firstChild.querySelectorAll(".p, .p2,.p3"); 

[].forEach.call(descendant, function(itm){ 
    itm.style.backgroundColor = "blue"; 
    var ch = firstChild.clientHeight; 
    itm.style.height = ch + "px"; 
}); 

Answer 2

Вы выбрали .r и хранится первый ребенок в var firstChild, так что используйте, что как указано ниже,

var firstChild = document.querySelector(".r:first-child"); 
 
var descendant = firstChild.querySelectorAll(".p, .p2,.p3"); 
 

 
[].forEach.call(descendant, function(itm){ 
 
    itm.style.backgroundColor = "green"; 
 
    var ch = firstChild.clientHeight; 
 
    itm.style.height = ch + "px"; 
 
});

.p,.p2,.p3{ 
 
    display:inline-block; 
 
    width:80px; 
 
} 
 
.p{ 
 
    height:50px; 
 
}

<div> 
 
    <div class="r"> 
 
    <div class="p">fgdsgs</div> 
 
    <div class="p2">sdgdfg</div> 
 
    <div class="p3">sdgdfg</div> 
 
    </div> 
 
</div>

Answer 3

var r = document.querySelectorAll(".r"); 
 
r.forEach(function(pel){ 
 
var rChildren = pel.querySelectorAll(".p, .p2,.p3"); 
 
rChildren.forEach(function(el){ 
 
    el.style.backgroundColor = "green"; 
 
    var ch = rChildren[0].clientHeight; // 1st child clientHeight of all elements under div having class r 
 
    el.style.height = ch + "px"; 
 
}); 
 
});

.p,.p2,.p3{ 
 
    display:inline-block; 
 
    width:80px; 
 
} 
 
.p{ 
 
    height:50px; 
 
}

<div> 
 
    <div class="r"> 
 
    <div class="p">fgdsgs</div> 
 
    <div class="p2">sdgdfg</div> 
 
    <div class="p3">sdgdfg</div> 
 
    </div> 
 
</div>

var r = document.querySelectorAll(".r"); 
 
r.forEach(function(pel){ 
 
var rChildren = pel.querySelectorAll(".p, .p2,.p3"); 
 
rChildren.forEach(function(el){ 
 
    el.style.backgroundColor = "green"; 
 
    var ch = rChildren[0].clientHeight; // 1st child clientHeight of all elements under div having class r 
 
    el.style.height = ch + "px"; 
 
}); 
 
});

.p,.p2,.p3{ 
 
    display:inline-block; 
 
    width:80px; 
 
} 
 
.p{ 
 
    height:50px; 
 
}

<div> 
 
    <div class="r"> 
 
    <div class="p">fgdsgs</div> 
 
    <div class="p2">sdgdfg</div> 
 
    <div class="p3">sdgdfg</div> 
 
    </div> 
 
    <br><br> 
 
    <div class="r"> 
 
    <div class="p">fgdsgs</div> 
 
    <div class="p2">sdgdfg</div> 
 
    <div class="p3">sdgdfg</div> 
 
    </div> 
 
</div>