jQuery get the children distance from parent div

June 4, 2022

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

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.

>Solution :

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