Left Offset eines Inline-Element mit jQuery

Question

Ich habe das folgende Stück HTML:

<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 bei 600px fixiert CSS. Nun möchte ich den Offset() links vom <strong> Element finden. Also habe ich:

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

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

Wie finde ich den offset(). Left-Wert des Inline-Strong-Elements?

Answer 1

Hier ist, was passiert:

Da das Inline-Element über mehrere Zeilen Sie jQuery geben die am weitesten links stehende Position dieses Elements, nicht den Versatz des Beginns der Element.

Um dies zu umgehen, versuchen Sie dieses Plugin:

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

Das Plugin ein temporäres Element schaffen und es kurz vor dem Zielelement einsetzen - es wird dann den Offset dieses temporären Element zurückzukehren.

Beispiel Nutzung:

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

Answer 2

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

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

Answer 3

Der Grund, warum Sie das Ergebnis 8px bekommen ist, weil, obwohl das Element in halbem Weg durch Ihren Container beginnt, da eine Linie seiner linke Kante bricht es ist 8px in von der Seite.

Ich habe eines dieser Gefühle, dass es wahrscheinlich einen viel besseren Weg als das zu tun, aber das erste, was ich denken könnte, um dieses Problem zu umgehen, ist ein anderes Element direkt vor dem <strong> einfügen und überprüfen Sie seine Position:

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