javascript - jQuery children() 和 find() : anything that looks like closest()? 之间的解决方案

Question

根据收到的不同答案，使用 jQuery 而不实现我们自己的选择器功能的唯一解决方案是使用带有“:first”或后跟“.eq(0)”的 jQuery 基本选择器。

我想知道它们是否是任何类型的最大深度选项或类似“只获取第一个结果然后返回它”的函数，但它似乎它在 jQuery 中不可用，因为甚至 :first in选择器似乎并不比调用 .eq(0) 更快 感谢所有评论。

---

原帖:

我想知道是否有像“closest”这样的函数可用于子元素。

假设我有一个这样的 html 结构:

div.container > [* 一些元素，我不能使用 children()] > div.sub1 > div.sub2 > div.sub1 > [其他各种子元素]

如果我想要第一个 div.sub1 我正在做类似的事情:

$("div.container").find("div.sub1").eq(0)

问题是我们不能指定“最大深度”，所以它会在所有 child 中搜索。我认为这是一个性能问题。

我说的是“最大深度”，因为我可以列出可能的选择器案例，但这将是一个很长的列表，大约 6-10 个项目，具体取决于案例。

有人对此有解决方案吗？

谢谢

Answer 1

您可以通过组合不同数量的子选择器 (>) 和通配符 (*) 来实现:

// max-depth: grand-children
$('.container').find('> .sub1, > * > .sub1').first();

// max-depth: great-grand-children
$('.container').find('> .sub1, > * > .sub1, > * > * > .sub1').first();

而且，由于硬编码可能相当乏味，您可以使用自定义方法为您构建选择器:

jQuery.fn.findAtDepth = function (selector, maxDepth) {
    var depths = [], i;

    if (maxDepth > 0) {
        for (i = 1; i <= maxDepth; i++) {
            depths.push('> ' + new Array(i).join('* > ') + selector);
        }

        selector = depths.join(', ');
    }

    return this.find(selector);
};

$('.container').findAtDepth('.sub1', 3).first();

示例:http://jsfiddle.net/V82f3/2/

---

这样做的主要缺陷是它仅限于相对简单的选择器(或者可能只是单个选择器):

$('.container').findAtDepth('.sub1, .sub2', 3).first();

这将在最大深度 3 处搜索 .sub1，但在任意深度处搜索 .sub2。