jquery - 如何从元素的像素顶部获取位置？

Question

我有一个UL包含 5 个元素的LI元素：

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

我想从顶部获取每个顶部的像素值，但是当我使用此代码时：LIUL

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

它只是向我展示了这个：'auto'，为什么？

Answer 1

您可以使用 .position() 。您还可以使用 :nth-child 选择特定的 li。

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

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

Answer 2

use offset if you want to get position relative to the document, use position to get position relative to the container element.

$('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
});