Linksversatz eines Inline-Elements mit jQuery

Question

Ich habe das folgende HTML-Stück:

<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit <strong id="s">esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</strong></p></div>

Die Breite des DIV ist mit CSS auf 600px festgelegt. Nun möchte ich den Offset().left des DIV finden. <strong> Element. Also tat ich es:

alert( $("#s").offset().left );

Allerdings scheint dies nicht den richtigen Wert zu produzieren, wie ich deutlich sehen kann das starke Element ist auf halbem Weg durch die 600px Breite gesehen, aber der Offset-Wert bekomme ich nur 8px.

Wie finde ich den Wert offset().left des Elements inline strong?

Answer 1

Es geht um Folgendes:

Da sich das Inline-Element über mehrere Zeilen erstreckt, gibt jQuery die äußerste linke Position des Elements an, nicht den Versatz des Elementanfangs.

Um dies zu umgehen, probieren Sie dieses Plugin aus:

jQuery.fn.inlineOffset = function() {
    var el = $('<i/>').css('display','inline').insertBefore(this[0]);
    var pos = el.offset();
    el.remove();
    return pos;
};

Das Plugin erstellt ein temporäres Element und fügt es unmittelbar vor dem Zielelement ein - es gibt dann den Offset dieses temporären Elements zurück.

Beispiel für die Verwendung:

alert( jQuery('strong').inlineOffset().left );

Answer 2

Der Grund, warum Sie das Ergebnis von 8px erhalten, ist, dass, obwohl das Element in der Hälfte des Containers beginnt, da es einen Zeilenumbruch gibt, der linke Rand 8px von der Seite entfernt ist.

Ich habe das Gefühl, dass es wahrscheinlich einen viel besseren Weg gibt als diesen, aber das erste, was mir einfällt, um dieses Problem zu umgehen, ist, ein weiteres Element direkt vor der <strong> und überprüfen Sie seine Position:

$("<span><span>").insertBefore($('#s')).offset();

Answer 3

Ich glaube, Offset ist relativ zum Dokument, während Position relativ zum Elternteil ist.

http://docs.jquery.com/CSS/position