使用jQuery查找相对元素

使用jQuery查找相对元素,jquery,selector,parent,Jquery,Selector,Parent,是否有一种简单而干净的jQuery方法来查找元素的相对位置?换句话说:查找具有css属性位置:相对的第一个父元素,或body元素(如果没有父元素具有位置:相对的) 我不知道父级的css类或whatsover。从加载到$elem var $closestRelativeParent = $elem.parents().filter(function() { // reduce to only relative position or "body" elements var $this =

是否有一种简单而干净的jQuery方法来查找元素的相对位置?换句话说:查找具有css属性
位置:相对的第一个父元素,或body元素(如果没有父元素具有
位置:相对的


我不知道父级的css类或whatsover。

从加载到
$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"

我假设你想知道这一点,以便计算孩子相对于第一个相对父母的位置。我建议更好的方法是只使用jQuery的
.offsetParent()
计算,它还将查找position
fixed
absolute
的父项,因为它们将对孩子的位置产生类似的影响

这就是说,这里有一个快速的模型,您可以使用
.offsetParent()
来计算它的相对位置:


绝对是定位子元素的最佳解决方案!
// 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
});