jQuery是子级()和find()之间的解决方案:任何看起来最接近()的解决方案？

Question

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

我想知道它们是某种最大深度选项，还是像“只获得第一个结果然后返回它”这样的函数，但是它似乎在jQuery中是不可用的，因为它甚至:在选择器中调用.eq(0)似乎不会更快，感谢所有的注释。

原始员额：

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

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

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

如果我想要第一个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。