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>

在每次出现时获得每个孩子的身高的总值

1 个答案: