javascript - 如何更改随机元素高度

Question

这是我的循环:

var i=0;
while( i++ < 100) {
  $( "#container" ).append('<li id="li' + i + '" class="item image"></li>');
  var y = Math.floor(Math.random() * 200) + 100;
  $('#li' + i).css({
      height: y,
  });
}

这在某种程度上满足了我的需要。它找到 #container 元素并将 100 个列表项放入其中，并为它们提供不大于 300 的随机高度。

我真正需要它做的是两件事:

1. 我需要它来定位“ul”#container 元素，然后定位已经内部的“li”元素，并将 id 更改为 id="li1", id="li2"、id="li3"等可能使用 attr('id', 'li' + i) 并给它们一个随机高度。

2. 我需要它们的最小高度为 200 像素。

如何用循环来做到这一点？我对 jQuery 还是个新手，请原谅我的无知。

Answer 1

只需检查列表中的 li 元素是否多于 i 的当前值，如果有，则更新相应的元素而不是创建新元素。

var i=0;
while( i++ < 100) {
    if ($('#container > li').length > i - 1) $('#container > li').eq(i - 1).attr('id', 'li' + i);
    else $( "#container" ).append('<li id="li' + i + '" class="item image"></li>');
    var y = Math.floor(Math.random()* 101 + 200); //Always gives an integer between 200 and 300
    $('#li' + i).css({
        height: y,
    });
}