如何用jQuery找到最接近的后代（匹配选择器）？

Question

我们可以使用closest(selector)来查找匹配选择器的第一个祖先元素。它将向上移动 DOM树，直到它找到匹配的选择器。但是，如果我想要在下调 DOM树，直到它找到匹配选择器？有没有这样做的jQuery功能？还是我需要使用广度优先搜索来实现？

举个例子。对于下面的DOM树，

<div id="main"> 
    <div> 
     <ul><!-- I want to match this ul --> 
      <li> 
       <ul><!-- but not this ul --> 
       </ul> 
      </li> 
     </ul> 
     <ul><!-- and match this ul --> 
     </ul> 
    </div> 
</div> 

如何做类似$('#main').closestDescendants('ul')？

Answer 1

像这样的东西可能就足够了：

$('#main ul:not(#main ul ul)') 

如果你需要更多的东西，然后准确您可以使用each（）来迭代元素列表，计算到#main的最短路径，并过滤掉路径比这更长的元素。

Answer 2

您想要匹配的元素是否始终是div的孩子？如果是这样，你可以使用.children（'ul'）语法来匹配。这将是最好把一个ID /类的DIV，这样你就可以做到以下几点...

$('#menu').children('ul'); 

<div id="main"> 
    <div id="menu"> 
     <ul><!-- I want to match this ul --> 
      <li> 
       <ul><!-- but not this ul --> 
       </ul> 
      </li> 
     </ul> 
     <ul><!-- and match this ul --> 
     </ul> 
    </div> 
</div> 

Answer 3

我有同样的问题，需要一个更通用的解决方案，所以我写了一个函数，并决定把它打包为jQuery plugin。我知道这个帖子很老，但请看看，让我知道你的想法。

Answer 4

因此，最接近的儿童插件链接被打破了我。这里有一个实现：

$.fn.nearest = function(selector) { 
    var nearest = $(), node = this, distance = 10000; 
    node.find(selector).each(function(){ 
     var n = $(this), 
      d = n.parentsUntil(node).size(); 
     if (d < distance) { 
      distance = d; 
      nearest = n; 
     } else if (d == distance) { 
      nearest = nearest.add(this); 
     } 
    }); 
    return nearest; 
};