如何使用jQuery获取具有某个CSS属性的第一个父级？

Question

我需要获得position:relative的第一个父级。像下面的例子中的内容，但我的真实内容将动态生成。

<div id="parent1" style="position:relative">
    <div id="parent2">
        <div id="my-element" style="position:absolute"></div>
    </div>
</div>

您是否知道使用jQuery执行此操作的简单方法？

Answer 1

您可以filter parents()的一组，并抓住与您的过滤器匹配的第一个元素：

$('#my-element')
    .parents()
    .filter(function() { 
        return $(this).css('position') == 'relative'; 
    }).first();

Demo（Works with classes, too）

Answer 2

我建议你添加一个类，而不是直接更改样式，然后使用jQuery查找该类。更加简单直观。

CSS：

.active{
    position:relative;
}

HTML：

<div id="parent1" class="active">
    <div id="parent2">
        <div id="my-element"></div>
    </div>
</div>

jQuery的：

//getting the first element with .active class
$('#my-element').closest('.active')