jQuery选择最接近元素的子元素

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

Use .filter() :

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

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

Answer 4

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