javascript - 使用 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 的高度方法返回计算出的高度。

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