trova l'elemento relativo con jQuery

Question

Esiste un modo jquery semplice e pulito per trovare l'elemento su cui un elemento ha la sua posizione relativa? In altre parole: trovare il primo genitore che ha l'attributo css position: relative o l'elemento body (se nessun elemento genitore ha position: relative).

Io non so la classe css o il whatsover del genitore.

Answer 1

partire con elemento caricato in $elem

var $closestRelativeParent = $elem.parents().filter(function() { 
    // reduce to only relative position or "body" elements 
    var $this = $(this); 
    return $this.is('body') || $this.css('position') == 'relative'; 
}).slice(0,1); // grab only the "first" 

Answer 2

Presumo che ci si vuole sapere questo al fine di calcolare la posizione del bambino dal suo primo genitore relativo. Suggerirei che l'approccio migliore sarebbe semplicemente utilizzare il calcolo .offsetParent() di jQuery, che cercherà anche i genitori della posizione fixed e absolute, in quanto avranno un impatto simile sulla posizione del bambino.

Detto questo, ecco una rapida mock-up di come si potrebbe andare su come utilizzare .offsetParent() per calcolare la sua posizione relativa (see JSFiddle):

// Given a target, find it's first offset parent, and work out the targets position 
// relative to the parent, by deducting their respective .offset() values 
var $target = $("#bar"), 
    $offsetParent = $target.offsetParent(), 
    oTarget = $target.offset(), 
    oParent = $offsetParent.offset(), 
    posTop = oTarget.top - oParent.top, 
    posLeft = oTarget.left - oParent.left; 

// Validate this works by cloning #bar and positioning the clone directly on top 
// Result should be a blue "bar" rather than a "red" one. 
$target.clone().appendTo($offsetParent).attr("id", "confirm").css({ 
    top: posTop, 
    left: posLeft 
});