最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery select child of closest element - Stack Overflow

programmeradmin3浏览0评论

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.

Share Improve this question asked May 24, 2013 at 19:15 Graham WaltersGraham Walters 2,0642 gold badges19 silver badges30 bronze badges 1
  • 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
Add a ment  | 

4 Answers 4

Reset to default 3

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.

发布评论

评论列表(0)

  1. 暂无评论