Question

I’m looking for a way to select elements that contain a certain element and then filter the results to get only the highest level. Difficult to explain but made easier with an example:

<div id="one">
    <div id="two">
        <div id="three" class="find-me"></div>
    </div>
</div>
<div id="four">
    <div id="five" class="find-me"></div>
</div>

In this case, I would want my set to contain #one and #four. If I try to do something like this:

var elements = $('div').has('.find-me');

I get elements #one, #two and #four.

Note: By ‘highest level’ relates to the topmost element in the first selector, $('div') in this case.

Answer 1

Well the definition of what the highest level is, is a bit ambiguous because in practice if there is any .find-me in your page the highest level parent would be html tag! which is useless.

By defining your problem more specifically you can come up with a clearer definition for this highest-definition and for example say the farthest div parent et. and in order to traverse parents of an element you can use .parents() and .closest() methods.

var farthestDiv = $(".find-me").parents("div").last();

obviously if you have more than one occurances of find-me you need to run this in a .each() loop.

see an example here: http://jsfiddle.net/GsQDb/3/