javascriptオブジェクト

Question

div内にあるのdiv内にある div内のすべてのdivを最初のdiv内部と同じように設定したいオブジェクト使用して、そのクラス名あたりとしてr：

var firstChild = document.querySelector(".r:first-child"); 
 
var descendant = firstChild.querySelectorAll(".p, .p2,.p3"); 
 
var p, p2, p3; 
 
[].forEach.call(descendant, function(itm) { 
 
    itm.style.backgroundColor = "green"; 
 
    var ch = document.getElementsByClassName("p"); 
 
    for (var i = 0; i < ch.length; i++) { 
 
    var ar = ['p', 'p2', 'p3']; //are the class name 
 
    p = ch[i].parentNode.clientHeight/1.5; // height value for p 
 
    p2 = ch[i].parentNode.clientHeight + p; // height value for p2 
 
    p3 = p2/1.5; // height value for p3 
 
    var colors = {}; //using dynamic 
 
    colors[ar[0]] = p; 
 
    colors[ar[1]] = p2; 
 
    colors[ar[2]] = p3; 
 
    ch[i].style.height = colors[ch[i].className] + "px"; //problem comes here this shows undefined 
 
    itm.style.height = ch[i].clientHeight + "px"; 
 
    document.getElementById('demo').innerHTML = "asfaf"; 
 
    } 
 
});

.p, 
 
.p2, 
 
.p3 { 
 
    display: inline-block; 
 
    width: 80px; 
 
    border: 1px solid #999; 
 
} 
 
.p { 
 
    height: 50px; 
 
} 
 
p2 { 
 
    height: 100px; 
 
} 
 
p3 { 
 
    height: 150px; 
 
}

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

あなたがp, p1, p2見てきたようにJavaScriptで異なる値を持っているが、私は同じで、すべてのdivを作りたい彼ight

例= rの中の最初のdivがpの場合、rはその値に従って表示されます（ch[i].parentNode.clientHeight/1.5）。同様に、最初のdivがp3の場合、r内のすべてのdiv（p, p2, p3） javascriptで記述されている同じ高さをp2/1.5 とすると、動的コードが問題になりますか？

デモ= https://jsfiddle.net/m2gj5dt5/である私は何だろう

Answer 1

、私は最大の高さを取得し、すべてのpのタグに設定します。

var firstChild = document.querySelector(".r > :first-child"); 
 
var descendant = document.querySelectorAll(".p, .p2, .p3"); 
 
var p, p2, p3; 
 
for (var el = 0; el < descendant.length; el++) { 
 
    debugger; 
 
    var itm = descendant[el]; 
 
    itm.style.backgroundColor = "green"; 
 
    debugger; 
 
    var ch = document.getElementsByClassName("p"); 
 
    for (var i = 0; i < ch.length; i++) { 
 
    var ar = ['p', 'p2', 'p3']; 
 
    p = ch[i].parentNode.clientHeight/1.5; 
 
    p2 = ch[i].parentNode.clientHeight + p; 
 
    p3 = p2/1.5; 
 
    var colors = {}; 
 
    colors[ar[0]] = p; 
 
    colors[ar[1]] = p2; 
 
    colors[ar[2]] = p3; 
 
    debugger; 
 
    ch[i].style.height = colors[ch[i].className] + "px"; 
 
    itm.style.height = ch[i].clientHeight + "px"; 
 
    document.getElementById('demo').innerHTML = "asfaf"; 
 
    } 
 
}

.p, .p2, .p3 { 
 
    display: inline-block; 
 
    width: 80px; 
 
    border: 1px solid #999; 
 
}

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

また、あなたはp2とp3のためにCSSで.のを忘れてしまいました。

フィドル：https://jsfiddle.net/qsj1444p/