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

因此，对我来说，最近的单个插件链接已经破了。这是一个实现：

$.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;
};

Answer 3

您想要匹配的元素是否始终是div的子元素？如果是这样，您可以使用.children（'ul'）语法进行匹配。最好在div上放置一个Id / Class，这样你就可以做到以下几点......

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

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

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

4 个答案: