it-swarm.com.de

jQuery Ermittelt den oberen Offset relativ zu einem bestimmten Div

Wie würden Sie mit jQuery die Offset-Position relativ zu einem bestimmten Container finden?

Zum Beispiel haben Sie Folgendes:

<body style="padding:20px"> 
<div id="top-container" style="margin-top:20px"> 
    <div id="one-level-container" style="margin-top:70px"> 
        <div id="two-level-container" style="margin-top:120px"> 
            <div id="ELEMENT" style="margin-top:10px"> 
            </div> 
        </div> 
    </div> 
</div>
</body>

(Die Polsterung und die Randspitzen dienen nur als Beispiele.)

Wie würden Sie die Position von #ELEMENT nach # top-container überprüfen?

Ich habe versucht, den Offset und die Position von jQuery zu verwenden, aber diese scheinen nicht den richtigen Offset zu erhalten, den ich suche.

26
Zach Reed

Verwenden Sie zum Beispiel $.offset()

alert($("#ELEMENT").offset().top - $("#top-container").offset().top)
body {
    background: blue
}

div {
    padding: 20px
}

#top-container {
    background: green
}

#one-level-container {
    background: red
}

#two-level-container {
    background: black
}

#ELEMENT {
    background: orange
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body style="padding:20px"> 
<div id="top-container" style="margin-top:20px"> 
    <div id="one-level-container" style="margin-top:70px"> 
        <div id="two-level-container" style="margin-top:120px"> 
            <div id="ELEMENT" style="margin-top:10px"> 
            </div> 
        </div> 
    </div> 
</div>
</body>
44
Steve Robbins