jquery - 获取子div在jquery中的位置

Question

我想得到子 div 'test1' 的位置。我想从父 div 得到左边的位置。父 div 和子 div 之间的距离是 '10px' 我想得到 10 像素。现在它打印140px(从屏幕起始位置计算)。

jQuery(document).ready(function($) {
  $('.test1').click(function() {
    var p = $(this);
    var position = p.position();
    console.log(position);
  });
});

.test1 {
  float: left;
  background-color: yellow;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100%">
  <div style="width:250px;background-color:red;padding:10px;margin:auto auto;height:100px" class="testParent">
    <div class="test1">one</div>
    <div class="test1">two</div>
    <div class="test1">three</div>
    <div class="test1">three</div>
    <div class="test1">three</div>
  </div>
</div>

Answer 1

将position:relative;添加到父元素，然后position()将返回相对于父元素的位置。

The .position() method allows us to retrieve the current position of an element relative to the offset parent.

Source

jQuery(document).ready(function($) {
  $('.test1').click(function() {
    var p = $(this);
    var position = p.position();
    console.log(position);
  });
});

.test1 {
  float: left;
  background-color: yellow;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100%">
  <div style="position:relative;width:250px;background-color:red;padding:10px;margin:auto auto;height:100px" class="testParent">
    <div class="test1">one</div>
    <div class="test1">two</div>
    <div class="test1">three</div>
    <div class="test1">three</div>
    <div class="test1">three</div>
  </div>
</div>