2009-06-15 14 views
7

का उपयोग कर एक इनलाइन तत्व की भरपाई मैं HTML का निम्न भाग है:वाम jQuery

<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> 

DIV की चौड़ाई 600px पर तय हो गई है सीएसएस का उपयोग कर। अब, मैं ऑफसेट() को <strong> तत्व के बाईं ओर ढूंढना चाहता हूं। तो मैंने किया:

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

हालांकि इस रूप में मैं स्पष्ट रूप से देख सकते हैं मजबूत तत्व 600px चौड़ाई के माध्यम से आधे रास्ते में देखा जाता है, लेकिन ऑफसेट मूल्य मैं केवल 8px है, सही मूल्य का उत्पादन करने के प्रतीत नहीं होता।

मैं ऑफ़लाइन मजबूत तत्व के ऑफसेट() को बाएं मान कैसे प्राप्त करूं?

उत्तर

24

यहाँ क्या हो रहा है है: इनलाइन तत्व कई पंक्तियों तक फैला

Diagram

के बाद से jQuery आप उस तत्व का सबसे बाईं ओर स्थिति दे देंगे, नहीं की शुरुआत की भरपाई तत्व।

इस के आसपास पाने के लिए, इस प्लगइन का प्रयास करें:

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); 
+0

ए (मामूली) अनुकूलन होगा: 1. var pos = el.offset(); 2. el.remove(); 3: रिटर्न पॉजिट; ऑफ़सेट() को दो बार कॉल करने और वापस करने के लिए एक नई वस्तु बनाने के बजाय। – PatrikAkerstrand

+0

धन्यवाद मशीन, बस इसे बदल दिया :) – James

+0

सबसे अच्छा जवाब मैंने कभी देखा है। ठीक है, जे-पी! –

-1

मेरा मानना ​​है कि ऑफसेट दस्तावेज़ के सापेक्ष है, जबकि स्थिति माता-पिता के सापेक्ष है।

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

0

कारण आप 8px का परिणाम हो रही है क्योंकि भले ही तत्व, अपने कंटेनर के माध्यम से आधे रास्ते में शुरू होता है वहाँ के बाद से एक लाइन तोड़ने अपने बाएं किनारे से में 8px है पृष्ठ।

मेरे पास उन भावनाओं में से एक है जो शायद इससे बेहतर करने का एक बेहतर तरीका है, लेकिन पहली समस्या यह है कि मैं इस समस्या के आसपास काम करने के बारे में सोच सकता हूं <strong> से पहले एक और तत्व डालना और इसकी स्थिति जांचना है:

$("<span><span>").insertBefore($('#s')).offset(); 
संबंधित मुद्दे