2017-11-06 3 views
2

この問題は、私がどのようにしてlisの高さをその行の最高のものに等しくするべきかわからないようです。私はそれを働かせましたが、それはすべての高さを最高のものと同じにします。ここでのコードは、私がこれまで持っています:https://codepen.io/benasl/pen/ooLrON?editors=1010テーブルなしのJavaScriptを使用した等高線のみ行

var max = -1; 
 
var list = document.getElementsByTagName('li'); 
 

 
Array.prototype.forEach.call(list, function(child) { 
 
    max = max > child.style.height ? max : child.offsetHeight; 
 
    console.log(child.offsetHeight); 
 
}); 
 
Array.prototype.forEach.call(list, function(child) { 
 
    child.style.height = max + 'px'; 
 
}); 
 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
li { 
 
    padding: 5px 10px; 
 
    display:block; 
 
    position:relative; 
 
    height: 100%; 
 
} 
 

 
p { 
 
    width: 100%; 
 
}
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <ul> 
 
     <li><p>testt tte sttest testtesttesttes ttesttes ttesttesttest</p></li> 
 
     <li><p>test</p></li> 
 
     <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li> 
 
     <li><p>test</p></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="col-sm-4"> 
 
    <ul> 
 
     <li><p>testtesttestt esttesttesttes ttesttesttestte sttesttest</p></li> 
 
     <li><p>test</p></li> 
 
     <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li> 
 
     <li><p>test</p></li> 
 
    </ul> 
 
    </div> 
 
    
 
    <div class="col-sm-4"> 
 
    <ul> 
 
     <li><p>testtest testtes ttesttes ttesttesttestt esttestte assaas sasaas saassa sasasasaassa sttest</p></li> 
 
     <li><p>test</p></li> 
 
     <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li> 
 
     <li><p>test</p></li> 
 
    </ul> 
 
    </div> 
 
    
 
</div>

+0

それはJSソリューションでなければなりませんか? CSSだけでもかまいませんか? 'li'を行単位でグループ化していないので、同じ高さになっています。下のすべての 'li'が1つの大きなバケツを持っているので、それは最も大きいものを見つけ出し、すべてのサイズにします。 – hungerstar

+1

"その行だけ"という意味は何ですか?あなたの例には1行しかありません。もう一つの問題はセレクタで、ドキュメント内のすべてのliを選択することです。セレクタとして行クラスを使用して試してみましたか? – dama

+1

@dama、そこに3 ulがあります。彼はこれらのulから最も高いliの高さを取得し、各liに最高の値を適用したいと考えています。だから、すべての李は同じ高さです。 –

答えて

0

変更

max = max > child.style.height ? max : child.offsetHeight; 

max = max > child.offsetHeight ? max : child.offsetHeight; 

へのchild.style.height セットのみあり、あなたは読むことができません それ。 window.getComputedStyle()で身長を知ることができます。例えば

var el = document.getElementById("myList"); 
var height = window.getComputedStyle(el, null).getPropertyValue("height"); 

offsetHeightはあなたのパディングとボーダーとの高さを与えます。 (how to change the offsetHeight of a element using javascript?

JSFiddle (結果を見るために実行をクリック)

関連する問題