why not my all div inside the div is getting the height of firstChild

Question

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

is changing height using script is required ? Why not from CSS? — Deep, Dec 24 '16 at 11:51

score 2 · Answer 1 · answered Dec 24 '16 at 11:56

2

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>

answered Dec 24 '16 at 11:56

frnt

8,455
2
22
25

I haven't seen the `[].forEach...` syntax before, it looks like its creating an "on the fly" empty array, but then if its empty - how can you foreach over the elements of an empty array? – the_velour_fog Dec 24 '16 at 11:58
@the_velour_fog, see [`Function#call`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call). – André Dion Dec 24 '16 at 12:24
@AndréDion thanks, yes now I see. Basically `descendant = firstChild.querySelectorAll(".p, .p2,.p3");` makes `descendant` a [node list](https://developer.mozilla.org/en/docs/Web/API/NodeList) comprising all the elements containing the `p`,`p2`,`p3` classes. Then `[].forEach.call` is basically "borrowing" the `forEach` from the [array prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) and calling it using `descendant` as this and passing in the callback. im guessing its because nodelist doesnt have `forEach`? – the_velour_fog Dec 24 '16 at 13:17
so its equivalent to to `descendant.forEach( function(itm) { //... })` – the_velour_fog Dec 24 '16 at 13:22
@the_velour_fog you can read a proper explanation on this stack answer http://stackoverflow.com/questions/16053357/what-does-foreach-call-do-in-javascript – frnt Dec 24 '16 at 13:38

score 0 · Answer 2 · answered Dec 24 '16 at 11:54

0

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";
});

answered Dec 24 '16 at 11:54

What are you trying to achieve with the loop? are you trying to make the blocks slowly increase in size? – Dec 24 '16 at 12:16

score 0 · Answer 3 · 2016-12-24T12:14:14.140

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>

@Anjali made an edit i think it much more clear now. – Dec 24 '16 at 12:07 — , Dec 24 '16 at 12:07

why not my all div inside the div is getting the height of firstChild

3 Answers3