Question

我试图从顶部获得div距离。我知道这听起来很容易，但让我解释一下。

我有很多同一个班级.item的div，并不是所有的div都与顶层的距离相同。所以，当我尝试像

这样的东西时

var $distanceItem = $('.item').position().top;
alert($distanceItem);

它显然返回相同的值，即使被点击的元素进一步下降，因为它们共享同一个类。

我想知道是否可以从我点击的元素顶部获取距离。我必须说我不能使用id's。

非常感谢

Answer 1

点击的元素在jQuery的点击事件回调函数中绑定到this变量，因此$(this).offset().top;会从顶部给出它的位置。看这个演示：

＆＃13;

$('body').on('click', '.item', function(e){
  var positionFromTop = $(this).offset().top;
  $('#result').html('Clicked div position from top: ' + positionFromTop + 'px');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="result"></div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
</div>

＆＃13;

Answer 2

好吧，因为有超过1个具有相同类的div，jQuery的.position（）函数将第一个div与该类一起使用并返回其＆＃39;位置。这就是为什么你得到相同的价值。

为了获得被点击的元素的位置，你可以在点击处理程序中使用this变量，如下所示：

// when any div that has the class="item" is clicked, call the same function 
$(".item").click(function() {
    // same function is called for every click, but the magic behind ``this`` is that
    // in the click event callback, it changes to the item that was clicked on

    var $distanceItem = $(this).position().top;
    alert($distanceItem);
});

从顶部

2 个答案: