正在递增列表项的高度

Escalating height of list items

本文关键字：高度 列表      更新时间：2023-09-26

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

除了在每个类中添加一个类之外，我无法找到一种方法。我制作了一把小提琴来展示我想要的结果：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>

您可以使用以下jquery代码：

https://jsfiddle.net/bLj6eLe7/1/

var init = 1;
var sum = 10;
$('ul li').each(function() {
  var newHeight = init * sum;
  $(this).height(newHeight+"px");
  init++;
});

你知道你的列表会有多长吗？所以是的。。

为什么不这样做呢？

li:nth-of-type(2) {
  height:20px;
}

等等。，等等

这里有一种纯javascript的方法（不需要jQuery）。首先，将id myList添加到<ul>，并在页面末尾或onLoad事件上添加以下脚本：

var step = 10;
var list = document.getElementById('myList');
var items = list.children;
for(var i = 0; i < items.length; i++) {
  var height = step * (i + 1);
  items[i].style.height = height + 'px';
}

这是一把小提琴在演奏：https://jsfiddle.net/bLj6eLe7/3/

您可以创建一个SASS循环来生成CSS规则，完全动态：

@for $i from 1 through 10 {
  .scale li:nth-child(#{$i}) {
    height: $i * 10px;
  }
}

输出如下所示：

.scale li {
  background: blue;
  list-style-type: none;
  color: white;
  margin-bottom: 10px;
}
.scale li:nth-child(1) {
  height: 10px;
}
.scale li:nth-child(2) {
  height: 20px;
}
.scale li:nth-child(3) {
  height: 30px;
}
.scale li:nth-child(4) {
  height: 40px;
}
.scale li:nth-child(5) {
  height: 50px;
}
.scale li:nth-child(6) {
  height: 60px;
}
.scale li:nth-child(7) {
  height: 70px;
}
.scale li:nth-child(8) {
  height: 80px;
}
.scale li:nth-child(9) {
  height: 90px;
}
.scale li:nth-child(10) {
  height: 100px;
}
<ul class="scale">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

jsFiddle演示：https://jsfiddle.net/azizn/9b66rvhw/4/

您可以使用简单的JQuery脚本来实现这一点：这是代码：

(function scale(){
     var height = 10;
     $.each($("#scale").children(), function(item){
          $(this).css("height", height);
          height+=10;
          });
}());

和JSFiddle

相关文章：