为什么不是我div里面的所有div是获得firstChild的高度

我想让我所有的div高度等于里面div的第一个孩子这里我有三个div p , p2 , p3这是在另一个div里面调用的class ）r，我想让我的p2 , p3相同高度为p。为什么不是我div里面的所有div是获得firstChild的高度

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

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

演示 - https://jsfiddle.net/104sn7mu/13/

编辑1

循环添加

来源

2016-12-24 Anjali

https://jsfiddle.net/104sn7mu/10/ –

正在改变使用脚本高度要求？为什么不从CSS？ – Deep

会jQuery的答案工作？ – ab29007

您可以使用您之前作出这样的变量：

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

来源

2016-12-24 11:54:45 grimmysilencio

谢谢，但我忘了添加一个循环 – Anjali

你想用循环实现什么？你是否试图让这些街区缓慢增加？ – grimmysilencio

您选择.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>

来源

2016-12-24 11:56:11 frnt

我之前没有看过'[] .forEach ...'语法，它看起来像是在创建一个“on the fly”空数组，但如果它是空的 - 你怎么能够遍历一个空数组的元素？ –

@the_velour_fog，参见['Function＃call']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call）。 –

@AndréDion谢谢，现在我明白了。基本上'后代= firstChild.querySelectorAll（“。p，.p2，.p3”）;'使'后代'[节点列表]（https://developer.mozilla.org/en/docs/Web/API/NodeList ）包含所有包含'p'，'p2'，'p3'类的元素。然后'[] .forEach.call'基本上是从数组原型中借用'forEach'（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach）并使用'descendant'调用它并传入回调函数。即时通讯猜测它的节点列表没有'forEach'？ –

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>

来源

2016-12-24 12:01:42

检查循环请 – Anjali

@Anjali提出编辑我认为现在更清楚。 –

为什么不是我div里面的所有div是获得firstChild的高度

回答

相关问题