उदाहरण
इसलिए, अगर हमारे पास "चाइल्ड-एलिमेंट" की आईडी वाला चाइल्ड एलिमेंट है और हम इसे पाना चाहते हैं कि यह किसी पेरेंट एलिमेंट की तुलना में लेफ्ट / टॉप पोजिशन पर है, तो एक दिव्यांग का कहना है कि "आइटम-पैरेंट" की क्लास थी, हम इस कोड का उपयोग करें।
var position = $("#child-element").offsetRelative("div.item-parent");
alert('left: '+position.left+', top: '+position.top);
प्लगइन अंत में, वास्तविक प्लगइन के लिए (कुछ नोटों के विस्तार के साथ जो चल रहा है):
// offsetRelative (or, if you prefer, positionRelative)
(function($){
$.fn.offsetRelative = function(top){
var $this = $(this);
var $parent = $this.offsetParent();
var offset = $this.position();
if(!top) return offset; // Didn't pass a 'top' element
else if($parent.get(0).tagName == "BODY") return offset; // Reached top of document
else if($(top,$parent).length) return offset; // Parent element contains the 'top' element we want the offset to be relative to
else if($parent[0] == $(top)[0]) return offset; // Reached the 'top' element we want the offset to be relative to
else { // Get parent's relative offset
var parent_offset = $parent.offsetRelative(top);
offset.top += parent_offset.top;
offset.left += parent_offset.left;
return offset;
}
};
$.fn.positionRelative = function(top){
return $(this).offsetRelative(top);
};
}(jQuery));
नोट: आप उपयोग कर सकते इस माउस क्लिक या माउसओवर घटना पर
$(this).offsetRelative("div.item-parent");