jquery内の子divの位置を取得

Question

子div 'test1'の位置を取得したいとします。親divから左の位置を取得したいと思います。親divと子divの間の距離は '10px'です。 10ピクセルを取得したい。今は140ピクセル（画面の開始位置から計算）を印刷する。

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()は親要素に相対位置を返します、親要素にposition:relative;を追加します。

.position()方法は、私たちは 要素オフセット親に対するの現在位置を取得することができます。

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>