找到所有“X一代”使用 jQuery 的后代

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

它第一次工作正常，但是当上下文更改为选择器中找到的元素时，它会因某种原因失败。

---

更新

好吧，我愚蠢地不清楚，也不了解我正在做的事情的规格。既然我已经审查了我的实施，我将在这里更新；我将标记满足我最初要求的最早答案，因为人们认为我如此无偿更新是个傻瓜（我不会责怪你），但是我下面提到的奖金是本质上是一个要求。我会发布另一个问题，但它可能会因重复而被关闭。无论如何，+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();