如何從元素的像素頂部獲取位置？

Question

我有有5個LI元素一個UL元素：

ul{ 
    width: 200px; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    overflow-y: auto; 
    overflow-x: hidden; 
    list-style: none; 
    margin-left: 3px; 
} 

li{ 
    position: relative; 
    height: 50px; 
    width: 193px; 
    left: 0; 
    right: 0; 
    margin: 10px 0; 
    cursor: pointer; 
} 

我想從UL頂部獲得每LI的頂部像素值，但是當我使用此代碼：

$('ul li').each(function(){ 
    console.log($(this).css('top')); 
}); 

它只是告訴我這個：'auto'，爲什麼？

Answer 1

您可以使用.position（）。你也可以使用：n-child來選擇一個特定的li。如果你想獲得相對於文檔的位置，使用位置來獲得相對於容器元素位置

$('ul li').each(function(){ 
    var position = $(this).position(); 

    console.log(position.top); 
    console.log(position.left); 
}); 

Answer 2

使用偏移。

$('ul li').each(function() { 
    var position = $(this).position(); // to get top value relative to container 
    position = $(this).offset();   // to get position top relative to document 
});