javascript - 在每次出现时获取每个 child 的高度总值

Question

我有这个简单的 html，现在我正在使用 jquery，但可以肯定的是我已经跳过了一些概念，并且不知道如何使我的代码更好。

<div>
   <ul id="scroll1" class="scrollx">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
   </ul>
   <ul id="scroll2" class="scrollx">
     <li></li>
     <li></li>
     <li></li>
   </ul>
   <ul id="scroll3" class="scrollx">
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
   </ul>
 </div> 

我想通过jquery调用class="scrollx"，并在每次出现时获取每个子项的高度总值并将其存储在各自的id(或数组(？))中。这就是我所拥有的:

$(document).ready(function () {
  var totalHeight = 0;
  var scrollme = $("#scroll1");
  scrollme.before("<span class='icon-arrow-up'></span>");
  scrollme.after("<span class='icon-arrow-down'></span>");
  scrollme.children().each(function(){
    totalHeight += $(this).height();
  });
  if (totalHeight <= scrollme.height()) {
   $(scrollme).siblings('span').css('visibility', 'hidden');
  }
});

如您所见，我需要为每个 id 重复此代码三次才能存档我想要的内容。这种方式太原始了，我真的很想优化这段代码，但我不知道从哪里开始，所以我在这里学习。

Answer 1

一种解决方案是使用 jquery .map()并将每个 li 元素高度保存在数组中:

var hei = $("div ul li").map(function() {
  return $(this).height();
});

console.log(hei);

div ul li {
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul id="scroll1" class="scrollx">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul id="scroll2" class="scrollx">
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul id="scroll3" class="scrollx">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

如果你想计算高度总和，你可以使用 .each()像:

var sumHeight = 0;
var hei = $("div ul li").each(function() {
  return sumHeight += ~~$(this).height();
});

console.log(sumHeight);

div ul li {
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul id="scroll1" class="scrollx">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul id="scroll2" class="scrollx">
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <ul id="scroll3" class="scrollx">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>