найти относительный элемент с помощью jQuery

Question

Существует ли простой и понятный способ jQUery найти элемент, к которому элемент имеет относительное положение? Другими словами: поиск первого родителя с атрибутом css position: relative или body-element (если ни у одного из родительских элементов не было position: relative).

Я не знаю класс css или что-либо из родителей.

Answer 1

Начиная с элемента, загруженного в $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

Я предполагаю, что вы хотели бы знать это, чтобы вычислить положение ребенка по его первому относительному родителю. Я бы предположил, что лучшим подходом было бы просто использовать вычисление jQuery .offsetParent(), которое также будет искать родителей позиций fixed и absolute, так как они окажут аналогичное влияние на положение ребенка.

Тем не менее, вот быстрый пример того, как вы можете использовать .offsetParent() для вычисления его относительной позиции (см. 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
});