javascript - list 元素的高度递增

我正在使用列表项进行缩放，并且我希望每个项目的高度都比前一个大。

除了给每个类添加一个类外，我无法采取其他任何方法。我做了一个小提琴，显示了想要的结果类型:https://jsfiddle.net/bLj6eLe7/

下面的代码实际上是我想要的结果。最好使用css，但如果需要可以与JS一起使用。

<ul>
    <li style="height: 10px;">1</li>
    <li style="height: 20px;">2</li>
    <li style="height: 30px;">3</li>
    <li style="height: 40px;">4</li>
    <li style="height: 50px;">5</li>
    <li style="height: 60px;">6</li>
    <li style="height: 70px;">7</li>
    <li style="height: 80px;">8</li>
</ul>

最佳答案

使用jQuery我会做到这一点

$(function(){
  $('ul li').each(function(i,v){
     $(this).css('height',(i * 10) +10);
  });
});

li {
  background: blue;
  list-style-type: none;
  color: white;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

关于javascript - list 元素的高度递增，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36176663/