Holen Sie sich die Position des Kindes div in jquery

Question

Ich möchte die Position des Kindes div 'test1'.Ich möchte die linke Position von Eltern div.der Abstand zwischen Elternteil div und Kind div ist' 10px 'ich will t 10 Pixel bekommen. Jetzt druckt es 140px (berechnet von der Bildschirm-Startposition).

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

hinzufügen position:relative; zu übergeordnetes Element, das Rück position() wird dann Position in Bezug auf das übergeordnete Element.

.position() Die Methode ermöglicht es, die aktuelle Position des ein Element relativ zu dem Versatz Mutter abzurufen.

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>