Basically I want to be able to select the div level2 parent from the child level4 div. My application does not has such classes, otherwise I'd just select level2 :)

<div class="level1">
  <div class="level2">
    <div class="level3">
      <div class="level4"></div>
    </div>
  </div>
  <div class="level2"> <!-- this is hidden -->
    <div class="level3">
      <div id="start" class="level4"></div>
    </div>
  </div>
</div>

I start with $('#start') and search for the first parent which is visible, but I'm not seeing a way to return the child of that parent. Searching for $('#start') inside the parent seems very wasteful as I start with a sub child to begin with.

$('#start').closest(':visible') // returns level1
$('#start').closest(':visible').first() // returns the first level2. I can't just use second because the number of level2s can change.
$('#start').closest(':visible').children().each(function(){ /* do some search to check it contains `$('#start')` }) // seems very wasteful.

Another way to look at what I'm trying to say would be; start in the middle, find the outside (the visible element), and move one element in.

Basically I want to be able to select the div level2 parent from the child level4 div. My application does not has such classes, otherwise I'd just select level2 :)

<div class="level1">
  <div class="level2">
    <div class="level3">
      <div class="level4"></div>
    </div>
  </div>
  <div class="level2"> <!-- this is hidden -->
    <div class="level3">
      <div id="start" class="level4"></div>
    </div>
  </div>
</div>

I start with $('#start') and search for the first parent which is visible, but I'm not seeing a way to return the child of that parent. Searching for $('#start') inside the parent seems very wasteful as I start with a sub child to begin with.

$('#start').closest(':visible') // returns level1
$('#start').closest(':visible').first() // returns the first level2. I can't just use second because the number of level2s can change.
$('#start').closest(':visible').children().each(function(){ /* do some search to check it contains `$('#start')` }) // seems very wasteful.

Another way to look at what I'm trying to say would be; start in the middle, find the outside (the visible element), and move one element in.

• javascript
• jquery

• No, I want the child of in this case level1, but I want the one that contains id="start". Also, those classes don't exist, so I can't search by class at all, they are only there to help explain the question. – Graham Walters Commented May 24, 2013 at 19:22

4 Answers 4

How about this:-

$('#start').parentsUntil(':visible').last();

This will give you all hidden parent div's until its visible parent and last() wil give the outermost parent which is hidden. last is not a selector on position it is the last() in the collection.

You want the .has() method

Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

$('#start').closest(':visible').children().has('#start');

See fiddle for example.

You say that the classes don't exist...why not add them? It would make thinks much easier to find. The class names don't need to have actual styles associated.

var allLevel4 = $('#start').closest(':visible').find('.level4');
var firstLevel4 = $('#start').closest(':visible').find('.level4')[0];
var secondLevel4 = $('#start').closest(':visible').find('.level4')[1]; //also, #start

Use .filter():

$('#start').closest(':visible').children().filter(':first-child')

.find() is also good for selecting pretty much anything.