使用 jQuery 查找所有“X 代”后代

Question

已解决（某种）

好吧，我想我使用以下方法解决了它（排除边缘情况）：

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

但是有人必须在这里得到公认的答案，我不会自己回答这个问题，也不会带着你来之不易的代表潜逃。因此，如果有人想添加任何内容，例如提供有关优化此功能的见解（在我去之前，$.extend() 它在）我可能会将您的答案标记为正确，否则会退回标记任何人首先是我最初的问题。

顺便检查一下fiddle：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);
    }
});

它第一次运行良好，但是当上下文更改为在 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>

给定一个指定的深度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>

还有：

// jQuery
$('#parent').find('.child:generation(1)'); // something in that vein

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

Answer 1

试试这个（亲吻！）：

$("#parent .child").not(".child .child");

编辑：获得第二级：

$("#parent .child .child").not(".child .child .child");

第三个：

$("#parent .child .child .child").not(".child .child .child .child");

等等......所以你可以（未经测试）：

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

Answer 2

一般来说，我认为您必须找到所有 .child 元素，然后丢弃那些具有 .child 祖先的元素：

$('#parent .child').filter(function() {
    return $(this).parent().closest('.child').length == 0;
});

不过，这并不能处理这样的事情：

<div id="parent">
    <div class="child"> <!-- match -->
        <div>
            <div class="child"> <!-- NO match -->
            </div>
        </div>
    </div>
    <div>
        <div>
            <div class="child"> <!-- NO match wanted but it will match -->
            </div>
        </div>
    </div>
</div>

但也许它足以满足您的 HTML 结构。

Answer 3

你可以这样得到它：

$("#parent").find(">div>.child")

---

编辑

如果第一个孩子可以在随机深度，你可以使用

$("#parent").find(".child").siblings();