jQuery 得到与 parent div 的 children 距离
jQuery get the children distance from parent div
我有这个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-content
class的高度
$(".sh-sidebar-content").height()
它显示了基于 window 高度的高度值。例如:735.
所以,现在,我需要从 li 元素的 value 获取距离。
您可以为此使用 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>
我有这个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-content
class的高度
$(".sh-sidebar-content").height()
它显示了基于 window 高度的高度值。例如:735.
所以,现在,我需要从 li 元素的 value 获取距离。
您可以为此使用 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>