使用普通javascript根据data-attribute更改列表项高度

Question

所以我需要使用相同的数据属性使用相同的高度，使用普通的javascript和没有表格，但是我正在努力完成这项任务，主要是获得具有相同数据属性的lis。这是代码：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是一个简单的指南。

您可能需要以下内容：

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