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

Question

I need to get the first parent that has position:relative . Something like in the example below but my real content will be dynamically generated.

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

Do you know a simple way to do this using jQuery?

Answer 1

You can filter the set of parents() , and grab the first element matching your filter:

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

Demo ( Works with classes, too )

Answer 2

I would recommend you to add a class instead of changing directly the style and then looking for that class using jQuery. Is much more simple and intuitive.

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')