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

Question

基本上，我希望能够从子级别4的div中选择父级别的div。 我的应用程序没有此类，否则我只选择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>

我从$('#start') ，搜索可见的第一个父级，但是我没有找到一种方法来返回该父级的子级。 从父级开始，在父级中搜索$('#start')似乎很浪费。

$('#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.

看我想说的另一种方式是： 从中间开始，找到外部（可见元素），然后向内移动一个元素。

Answer 1

这个怎么样：-

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

这将为您提供所有隐藏的父div，直到其可见的parent和last（）将给出被隐藏的最外面的父。 last不是位置上的选择器，它是集合中的last（）。

Answer 2

您需要.has（）方法

说明：将匹配元素集减少为具有与选择器或DOM元素匹配的后代的元素。

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

例如参见小提琴。

Answer 3

使用.filter() ：

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

.find()也非常适合选择几乎所有内容。

Answer 4

您说这些类不存在...为什么不添加它们？ 这将使思想更容易找到。 类名不需要关联实际的样式。

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