jQuery 得到与 parent div 的 children 距离

Question

我有这个HTML:

console.log( $(".sh-sidebar-content").height() );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sh-sidebar-content">
  <ul>
    <li><a href="#one">Compară ofertele noastre pentru a găsi cel mai bun credit ipotecar sau Prima Casă</a></li>
    <li><a href="#two">Ce este un credit ipotecar</a></li>
    <li><a href="#three">Care sunt condițiile de acordare ale unui credit ipotecar pentru cumpărarea sau construirea unei locuințe</a></li>
    <li><a href="#four">Care este suma maximă pe care o pot împrumuta</a></li>
    <li><a href="#five">Ce este creditul Noua Casă (fost Prima Casă)</a></li>
    <li><a href="#six">Care sunt condițiile de acordare ale unui credit prin Noua Casă</a></li>
    <li><a href="#seven">Care este suma maximă pe care o pot împrumuta prin Noua Casă</a></li>
    <li><a href="#eight">Acte necesare pentru solicitarea unui credit ipotecar</a></li>
    <li><a href="#nine">Acte necesare pentru solicitarea unui credit Noua Casă</a></li>
    <li><a href="#ten">Care este procedura de acordare pentru un credit ipotecar?</a></li>
    <li><a href="#eleven">Care este procedura de acordare a unui credit Noua Casă?</a></li>
    <li><a href="#twelve">Cum se restituie un credit ipotecar</a></li>
    <li><a href="#thirteen">Cum se restituie un credit obținut prin programul Noua Casă</a></li>
  </ul>
</div>

基于这个class sh-sidebar-content我需要得到每个li元素的距离

我可以使用

得到sh-sidebar-contentclass的高度

$(".sh-sidebar-content").height()

它显示了基于 window 高度的高度值。例如：735.

所以，现在，我需要从 li 元素的 value 获取距离。

Answer 1

您可以为此使用 position。获取基点(div)的位置，然后获取每个li的位置，然后相减

let divPos = $(".sh-sidebar-content").position();

$(".sh-sidebar-content li").each(function(i)
{
  console.log( $(this).position().top - divPos.top );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sh-sidebar-content">
  <ul>
    <li><a href="#one">Compară ofertele noastre pentru a găsi cel mai bun credit ipotecar sau Prima Casă</a></li>
    <li><a href="#two">Ce este un credit ipotecar</a></li>
    <li><a href="#three">Care sunt condițiile de acordare ale unui credit ipotecar pentru cumpărarea sau construirea unei locuințe</a></li>
    <li><a href="#four">Care este suma maximă pe care o pot împrumuta</a></li>
    <li><a href="#five">Ce este creditul Noua Casă (fost Prima Casă)</a></li>
    <li><a href="#six">Care sunt condițiile de acordare ale unui credit prin Noua Casă</a></li>
    <li><a href="#seven">Care este suma maximă pe care o pot împrumuta prin Noua Casă</a></li>
    <li><a href="#eight">Acte necesare pentru solicitarea unui credit ipotecar</a></li>
    <li><a href="#nine">Acte necesare pentru solicitarea unui credit Noua Casă</a></li>
    <li><a href="#ten">Care este procedura de acordare pentru un credit ipotecar?</a></li>
    <li><a href="#eleven">Care este procedura de acordare a unui credit Noua Casă?</a></li>
    <li><a href="#twelve">Cum se restituie un credit ipotecar</a></li>
    <li><a href="#thirteen">Cum se restituie un credit obținut prin programul Noua Casă</a></li>
  </ul>
</div>

jQuery 得到与 parent div 的 children 距离

jQuery get the children distance from parent div

jquery