إزاحة اليسار لعنصر مضمون باستخدام jQuery

Question

لدي قطعة التالية من 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>

تم إصلاح عرض DIC عند 600 بكسل باستخدام CSS. الآن، أريد أن أجد الإزاحة (). يسار <strong> عنصر. لذلك أنا فعلت:

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

ومع ذلك، لا يبدو أن هذا لا ينتج عن القيمة الصحيحة، حيث يمكنني أن أرى بوضوح أن العنصر القوي ينظر إليه في منتصف الطريق من خلال عرض 600PX، ولكن قيمة الإزاحة أحصل على 8 بكسل فقط.

كيف يمكنني العثور على الإزاحة (). القيمة اليسرى للعنصر القوي المضمن؟

Answer 1

إليك ما يحدث:

نظرا لأن العنصر المضمن يمتد سطر خطوط متعددة، فسوف يمنحك مسج الأيسر أكثر من هذا العنصر، وليس إزاحة بداية العنصر.

للحصول على هذا، جرب هذا البرنامج المساعد:

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

سيقوم البرنامج المساعد بإنشاء عنصر مؤقت وإدخاله قبل العنصر المستهدف - ثم سيعود إزاحة هذا العنصر المؤقت.

مثال على الاستخدام:

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

Answer 2

السبب في الحصول على نتيجة 8px لأنه على الرغم من أن العنصر يبدأ في منتصف الطريق من خلال حاوية الخاص بك، لأن هناك خط كسر حافةه اليسرى هو 8Px من الصفحة.

لدي أحد هذه المشاعر أن هناك طريقة أفضل بكثير للقيام بذلك من هذا، ولكن أول شيء يمكنني التفكير فيه في العمل في هذه المشكلة هو إدراج عنصر آخر مباشرة قبل <strong> والتحقق من موقفها:

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

Answer 3

أعتقد أن تعويضات نسبة إلى الوثيقة، في حين أن الموضع بالنسبة للوالد.

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