Question

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

除了为每个人添加一个课程外，我无法做到这一点。我做了一个小提琴，展示了我想要的那种结果：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>

Answer 1

使用Jquery我会这样做

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用此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++;
});

Answer 3

你知道你的名单会有多长？所以是的..

为什么不这样做？

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

等等。

Answer 4

这是一种纯粹的javascript方式（不需要jQuery）。首先在您的myList中添加<ul>的ID，然后在页面末尾或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/

Answer 5

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

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

输出如下：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 6

您可以使用简单的JQuery脚本执行此操作：这是代码：

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

和JSFiddle

升级列表项的高度

6 个答案: