Skip to content
Advertisement

jQuery get the children distance from parent div

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.

Advertisement

Answer

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>
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement