如何用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; 
};