当使用html将新的li html附加到页面时，无法准确获得li标签的高度

Question

我有一个列表li，在请求API后我将追加到页面上，并且我必须缩放li的填充，以使所有列表显示都适合一个3列的屏幕。

我将获取所有li高度并计算填充。但是我的问题是当我加载本地HTML文件时，高度不准确。如果我调整浏览器窗口的大小，它会正常工作。

我进行了研究，发现当添加所有li HTML时，li高度不会立即更新。如果在超时（1000）之后获得li高度，我将准确获得li高度。

$(window).resize(function(e) {
  //adjustScreen
});

$(document).ready(function() {
  //generate li html and add to ul
  $(list_element).append(ul_contents)
  .ready(function () {
      $(window).resize();
  });
});

#list {
  margin: 0 0 0 2%;
}

#list li {
  width: 30%;
  display: inline-block;
  padding-right: 2%;
  /* padding:3% 2% 3% 0; */
  font-size: 4.375vw;
  line-height: 1.5em;
  border-bottom: 1px #BABABA solid;
}

#list li div.ph_img {
  float: left;
  margin: 0px 3% 0px 0px;
  width: 30%;
}

#list li div.ph_img img {
  width: 100%;
}

#list li span.position {
  display: block;
  padding: 0px;
  font-size: 1.4vw;
  font-weight: bold;
  line-height: 1.5em;
  margin: 0px;
}

#list li span.name {
  display: block;
  padding: 0px;
  font-size: 2vw;
  font-weight: bold;
  line-height: 1.5em;
  margin: 0px;
}

#list li span.floor {
  display: block;
  padding: 0px;
  font-size: 1.2vw;
  font-weight: normal;
  line-height: 1.6em;
  margin: 0px;
}

#list li span.green {
  float: right;
  width: 67%;
  background-color: #00923A;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  line-height: 1.7em;
}

#list li span.red {
  float: right;
  width: 67%;
  background-color: #FF0000;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  line-height: 1.7em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list">
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxxx" alt=""></div>
    <span class="position">xxxxxxxxxxxx</span>
    <span class="name">xxxxxxxxxxxx</span>
    <span class="floor">xxxxxxxxxxxx</span>
    <span class="status red" device-id="013">xxxxxxxxxxxx</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxxx" alt=""></div>
    <span class="position">xxxxxxxxxxxx</span>
    <span class="name">xxxxxxxxxxxx</span>
    <span class="floor">xxxxxxxxxxxx</span>
    <span class="status red" device-id="013">xxxxxxxxxxxx</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxxx" alt=""></div>
    <span class="position">xxxxxxxxxxxx</span>
    <span class="name">xxxxxxxxxxxx</span>
    <span class="floor">xxxxxxxxxxxx</span>
    <span class="status red" device-id="013">xxxxxxxxxxxx</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxxx" alt=""></div>
    <span class="position">xxxxxxxxxxxx</span>
    <span class="name">xxxxxxxxxxxx</span>
    <span class="floor">xxxxxxxxxxxx</span>
    <span class="status red" device-id="013">xxxxxxxxxxxx</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxxx" alt=""></div>
    <span class="position">xxxxxxxxxxxx</span>
    <span class="name">xxxxxxxxxxxx</span>
    <span class="floor">xxxxxxxxxxxx</span>
    <span class="status red" device-id="013">xxxxxxxxxxxx</span>
  </li>
  <li class="clearfix">
    <div class="ph_img"><img src="xxxxxxxxxxxx" alt=""></div>
    <span class="position">xxxxxxxxxxxx</span>
    <span class="name">xxxxxxxxxxxx</span>
    <span class="floor">xxxxxxxxxxxx</span>
    <span class="status red" device-id="013">xxxxxxxxxxxx</span>
  </li>
</ul>

我的li高度功能

function getLIHeightOfRow(index) {
  var max_li_height = 0;
  //0, 1, 2
  for (var i = 0; i <= 2; i++) {
    let li_element = $(list_li_element).get(3 * index + i);

    if (li_element != undefined) {
      //plus border height 1px
      let height = Math.ceil($(li_element).height()) + 1;
      console.log("li height " + (3 * index + i) + " - " + height);
      if (height > max_li_height) {
        max_li_height = height;
      }
    }

  }
  console.log(max_li_height);
  return max_li_height;
}

在将li html附加到ul之后，是否有任何同步方式来运行函数？回调？

Answer 1

jQuery的height方法返回计算出的高度。

$($('#list li')[index]).height();