I want to make my all div height equal to the first child of the inside div here I have three div p , p2 , p3
which is inside of another div called(class) r
, I want to make my p2 , p3
same height to 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
loops added
You have selected .r
and stored first child in var firstChild
, so use that as below,
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>
you can use the variable you made earlier like this:
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";
});
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.