时间戳

首页 > 解决方案 > 如何从屏幕顶部获取 li 的高度？

jquery - 如何从屏幕顶部获取 li 的高度？

问题描述

所以我有一个 div 和里面的 div，我里面有 ul 和 li 并且 li 有不同的类，但是这些类是有序的，所以我想找到 li:class 名称的高度，到目前为止我能够得到div 距屏幕顶部的高度。

<div class="div-class">
  <ul>
    <li class="deepesh"></li>
    <li class="deepesh"></li>
    <li class="deepesh"></li>
    <li class="deepesh"></li>
    <li class="deepesh"></li>
    <li class="deepesh"></li>
    <li class="pdf"></li>
    <li class="pdf"></li>
    <li class="pdf"></li>
    <li class="pdf"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
  </ul>
</div>

alert($(".div-class").closest('.pdf').offset().top));

此代码不适用于如何使用 pdf 类获取 li 的高度。

标签： jqueryjquery-ui

解决方案

closest()遍历DOM 树。您要查找的元素是 the 的子元素，ul因此您需要down。因此使用find()：

console.log($(".div-class").find('.pdf:first').offset().top);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-class">
  <ul>
    <li class="deepesh"></li>
    <li class="deepesh"></li>
    <li class="deepesh"></li>
    <li class="deepesh"></li>
    <li class="deepesh"></li>
    <li class="deepesh"></li>
    <li class="pdf">Target element</li>
    <li class="pdf"></li>
    <li class="pdf"></li>
    <li class="pdf"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
    <li class="image"></li>
  </ul>
</div>

推荐阅读