jQuery get the children distance from parent div-CodePudding

I have this HTML:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <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>

Based on this class sh-sidebar-content I need to get the distance of each li element.

I can get the height of sh-sidebar-content class using

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

It shows me the height value based on the window height. For eg: 735.

So, Now, I need to get the distance from this value of the li element.

CodePudding user response：

You can use position for this. Get the base point (div) position, then get each li's position, then subtract.

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 >
  <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>