爲什麼不是我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的高度

回答

相關問題