javascript - 如何通过其偏移量查找 DOM 元素 ID/值

Question

我想通过偏移量找到 DOM 元素 ID/值。可能图片解释得很清楚。我有一个指定值范围的 div。和更改值但范围 div 的按钮是固定的。现在我想在按钮事件之后找到范围值。

this my html code. 

 <div ng-app='myApp' ng-controller="Slider" id="slider">
   <li class="year ruler" ng-attr-id="{{y.year}}" ng-repeat="y in years"    style="top: {{y.top}}px">{{y.year}}<label class="index"> -</label></li>
 <div id="ranges" class="ranges"></div>
<div class="panel">
    <button ng-click="up()">up</button>
    <button ng-click="down()">down</button><br>
    <button ng-click="zoomOut()">+</button>
    <button ng-click="zoomIn()">-</button>
</div>

我使用这段代码来查找值但警告未定义

var dom= $(document.body).find('[offsetTop = '+80+']');
    alert($(dom).attr('id')); 

Answer 1

您可以使用 jQuery 的过滤功能根据元素的偏移量过滤元素

function getElementByTopOffset(selector, offset){
    return $(selector).filter(function( index, elem) {
       return $(elem).offset().top == offset;
    });
}

此外，如果您喜欢完全使用 Vanilla ，这里可能是一个解决方案:

function getElementByTopOffset(selector, offset){
    return [].filter.call(document.querySelectorAll(selector), function(elem) {
          return elem.offsetTop == offset
    });
}