jQuery child()和find()之间的解决方案:看起来像最接近的东西()？

Question

根据收到的不同答案,使用jQuery而不实现我们自己的选择器函数的唯一解决方案是使用":first"或jQuery后跟".eq(0)"的基本选择器.

我想知道它们是否是任何类型的最大深度选项或类似"仅获得第一个结果然后返回它"的功能但是它似乎在jQuery中不可用,因为甚至:首先在选择器中似乎没有更快致电.eq(0)感谢您的所有评论.

---

原帖:

我想知道像"最近"这样的函数是否可用于子元素.

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

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

如果我想要第一个div.sub1我做的事情如下:

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

问题是我们无法指定"最大深度",因此将在所有孩子中搜索它.我认为这是一个性能问题.

我正在谈论"最大深度",因为我可以列出可能的选择器案例,但它将是一个很长的列表,大约6-10个项目,具体取决于具体情况.

有人有解决方案吗？

谢谢

Answer 1

你可以通过以不同的数量组合child-selector(>)和wildcard(*)来获得这个:

// 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();

这将搜索.sub1最大深度为3,但是.sub2在任何深度.