使用jQuery查找所有"X代"后代

Dan*_*ugg 5 jquery children descendant

解决了(有点)

好吧,我想我使用以下方法解决了它(禁止边缘情况):

function findByDepth(parent, child, depth){
    var children = $();
    $(child, $(parent)).each(function(){
        if($(this).parentsUntil(parent, child).length == (depth - 1)){
            children = $(children).add($(this));
        }
    });
    return children;
}

// this would successfully return the 3.X elements of an HTML snippet structured
// as my XML example, where <parent> = #parent, etc.
var threeDeep = findByDepth('#parent', '.child', 3);
Run Code Online (Sandbox Code Playgroud)

然而,有人必须在这里得到接受的答案,我不打算自己回答这个问题,并且与你赚得很好的代表潜逃.所以,如果有人想添加任何东西,如洞察优化此功能(之前我去和$.extend())我很可能标志着你的答案正确,否则回落到标记谁是第一对我最初的问题.

顺便说一句,请在小提琴中查看:http://jsfiddle.net/5PDaA/

分更新

再看看@ CAFxX的答案,我意识到他的方法可能更快,利用querySelectorAll可以的浏览器.无论如何,我修改了他对下面的方法,但它仍然让我感到愤怒:

$.fn.extend({
    'findAtDepth': function(selector, depth){
        var depth = parseInt(depth) || 1;
        var query = selector;
        for(var i = 1; i < depth; i++){
            query += (' ' + selector);
        }
        return $(query, $(this)).not(query + ' ' + selector);
    }
});
Run Code Online (Sandbox Code Playgroud)

它第一次工作正常,但随着上下文更改为在其中找到的元素selector,它由于某种原因失败.


更新

好吧,我愚蠢地不清楚,并且不知道我正在做什么的规格.自从我查看了我的实现后,我将在这里更新; 我会标记出符合我给了人们最初的要求觉得我要更新,以便无偿(傻瓜最早的答案,我不会怪你的),但是我的奖金下面要提到的是基本的要求.我发布了另一个问题,但它可能会因重复而被关闭.无论如何,为了您的耐心等待+ 1:

给定子项的深度规范是必要的(因为它包含在函数中或其他方式)因此隔离了子项并且同样嵌套(不一定是兄弟)匹配元素.

例如(简称XML):

<!-- depth . sibling-index-with-respect-to-depth -->

<parent>
    <child>                     <!-- 1.1 -->
        <child>                 <!-- 2.1 -->
            <child>             <!-- 3.1 -->
                <child></child> <!-- 4.1 -->
            </child>            
            <child>             <!-- 3.2 -->
                <child></child> <!-- 4.2 -->
            </child>            
        </child>                
        <child>                 <!-- 2.2 -->
            <child></child>     <!-- 3.3 -->
        </child>                
    </child>                    
</parent>
Run Code Online (Sandbox Code Playgroud)

给定指定的深度2,2.X选择所有元素.鉴于4所有4.X,等等.


原始问题

使用jQuery的本机功能,有没有办法只选择匹配选择器的"第一代"后代?例如:

注意:以下仅是一个示例..child元素嵌套在任意级别的父级中.

额外奖励:正如我在下面提出的语法所指出的那样,提供一种指定选择应该遍历的深度的方法的答案将是令人难以置信的.

// HTML
<div id="parent">
    <div>
        <div class="child"> <!-- match -->
            <div>
                <div class="child"> <!-- NO match -->
                </div>
            </div>
        </div>
        <div class="child"> <!-- match -->
            <div>
                <div class="child"> <!-- NO match -->
                </div>
            </div>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

和:

// jQuery
$('#parent').find('.child:generation(1)'); // something in that vein
Run Code Online (Sandbox Code Playgroud)

尝试从上下文中选择#parent,jQuery :first在这里不起作用,因为它只能击中第一个匹配的.child.

CAF*_*FxX 2

试试这个(亲吻!):

$("#parent .child").not(".child .child");
Run Code Online (Sandbox Code Playgroud)

编辑:获得第二级:

$("#parent .child .child").not(".child .child .child");
Run Code Online (Sandbox Code Playgroud)

第三:

$("#parent .child .child .child").not(".child .child .child .child");
Run Code Online (Sandbox Code Playgroud)

等等...所以你可以(未经测试):

function findChildrenDeepDown(parentSelector, level) {
  level = parseInt(level);
  var firstSelctor = parent, notSelector = ".child", i;
  for (i=0; i<level; i++) {
    firstSelector += " .child";
    notSelector += " .child";
  }
  return $(firstSelector).not(notSelector);
}

findChildrenDeepDown("#parent", 3); // find third-level children of #parent
Run Code Online (Sandbox Code Playgroud)