jQuery child（）和find（）之间的解决方案：看起来像最接近的东西（）？

Question

根据收到的不同答案，使用jQuery而不实现我们自己的选择器函数的唯一解决方案是使用“：first”或jQuery后跟“.eq（0）”的基本选择器。

我想知道它们是否是任何类型的最大深度选项或类似“仅获得第一个结果然后返回它”的函数但是似乎它在jQuery中不可用，因为甚至：第一个调用.eq（0）时，选择器似乎不会更快 感谢所有评论。

---

原帖：

我想知道子元素是否可以使用像“最近”这样的函数。

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

div.container＆gt; [*有些元素，我不能用子（）]＆gt; div.sub1＆gt; div.sub2＆gt; div.sub1＆gt; [其他各种儿童元素]

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

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

问题是我们无法指定“最大深度”，因此将在所有孩子中搜索它。我将其视为性能问题。

我说的是“最大深度”，因为我可以列出可能的选择器案例，但这将是一个很长的列表，大约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都会搜索。