Lewy przesunięcie elementu liniowego przy użyciu jQuery

Question

Mam następujący fragment kodu 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> 

Szerokość DIV jest ustawiona na 600px za pomocą CSS. Teraz chcę znaleźć offset(). Po lewej stronie elementu <strong>. Więc zrobiłem:

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

Jednak nie wydaje się, aby wytworzyć odpowiednią wartość, jak można wyraźnie zobaczyć silny element widać półmetku szerokość 600px, ale wartość przesunięcia mogę to tylko 8 pikseli.

Jak znaleźć offset(). Lewa wartość wbudowanego silnego elementu?

Answer 1

Oto co się dzieje:

Ponieważ element inline obejmuje wiele linii jQuery daje lewy-większość położenie tego elementu, nie przesunięcie początku element.

Aby obejść ten problem, spróbuj tej wtyczki:

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

Wtyczka utworzy tymczasowy element i wstawić go tuż przed elementu docelowego - będzie następnie powrócić przesunięcie tego elementu czasowego.

Przykład użycia:

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

Answer 2

Uważam, że przesunięcie jest względne w stosunku do dokumentu, natomiast pozycja jest względna w stosunku do rodzica.

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

Answer 3

Powodem są coraz wynik 8PX dlatego chociaż element rozpoczyna się w połowie drogi przez kontenera, ponieważ istnieje linia złamać jego lewa krawędź jest 8 pikseli w od strona.

Mam jedno z tych odczuć, że prawdopodobnie jest o wiele lepszy sposób na zrobienie tego niż to, ale pierwszą rzeczą, o której mógłbym pomyśleć, aby obejść ten problem, jest wstawienie kolejnego elementu tuż przed <strong> i sprawdzenie jego położenia:

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