Question

我已经设置了一个示例，我想要计算嵌套元素到父元素的位置。

例如，在这个例子中http://jsfiddle.net/45cJZ/对于click事件，我需要计算嵌套div元素到它父元素的位置，即.wrapper class。

可以使用.offsetParent()

完成

Answer 1

将position:relative添加到.wrapper（使其成为位置计算的父级）并使用.position()获取所点击元素相对于.wrapper的位置

HTML

<div class="wrapper">
    <div class="div1"></div>
    <!-- ... -->
</div>

CSS

.wrapper {
    /*...*/
    position: relative;
}

的Javascript

$(".wrapper").children().on("click", function() {
    console.log($(this).position());
});

演示：http://jsfiddle.net/8d62J/

Answer 2

@安德烈亚斯＆＃39;答案是最好和正确的，但既然你提到了offset，你可以看到它是如何运作的。

$('.wrapper div').on('click', function (event) {
    var myOffset = $(this).offset();
    var myParentOffset = $(this).parent().offset();

    console.log(myOffset, myParentOffset);
    var topDiff = myOffset.top - myParentOffset.top;
    var leftDiff = myOffset.left - myParentOffset.left;
    console.log(topDiff, leftDiff);
});

演示：http://jsfiddle.net/robschmuecker/45cJZ/1/

Answer 3

您可以使用jQuery .position()来获取元素相对于其父元素的坐标。这是您编辑的fiddle以显示.position（）的功能。只需更改类即可查看警报更改。您所要做的就是：

var p = $(".div2").position();
alert("Left: " + p.left);
alert("Top: " + p.top);

如何在click事件中计算嵌套元素对其父元素的位置

3 个答案: