リスト項目の高さを普通のjavascriptを使ってdata-attributeに基づいて変更する

Question

私は同じデータ属性で同じ高さでlisを作成する必要がありますが、プレーンなjavascriptとテーブルは使用しません。同じデータ属性を持つ。ここでは、コードです：https://codepen.io/benasl/pen/ooLrON?editors=1010

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 class="item" data-item="1"><p>testt tte sttest testtesttesttes ttesttes ttesttesttest</p></li> 
 
     <li class="item" data-item="2"><p>test</p></li> 
 
     <li class="item" data-item="3"><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li> 
 
     <li class="item" data-item="4"><p>test</p></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="col-sm-4"> 
 
    <ul> 
 
     <li class="item" data-item="1"><p>testt tte sttest testtesttesttes ttesttasdsadasd es ttesttesttestas asdasdasdsad asdasdasd</p></li> 
 
     <li class="item" data-item="2"><p>test</p></li> 
 
     <li class="item" data-item="3"><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li> 
 
     <li class="item" data-item="4"><p>test</p></li> 
 
    </ul> 
 
    </div> 
 
    
 
    <div class="col-sm-4"> 
 
    <ul> 
 
     <li class="item" data-item="1"><p>testt tte sttest testtesttesttes ttesttes ttesttesttest</p></li> 
 
     <li class="item" data-item="2"><p>test</p></li> 
 
     <li class="item" data-item="3"><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li> 
 
     <li class="item" data-item="4"><p>test</p></li> 
 
    </ul> 
 
    </div> 
 
    
 
</div>

Answer 1

はCSSの属性セレクタを調べてください。 Hereは簡単なガイドです。

あなたが何かしたいことがあります。データ項目とLISの一つは、（1）より大きな高さを持っている場合、私は必要なもの

li[data-item="1"] { 
    height: 5px; 
}