jQuery/JavaScript：仅选择第一层子元素

Question

我想选择给定类型的第一级子元素，但不包括嵌套在另一个符合条件的元素中的元素。例如，在:

<div id='top'>
  <div id="s1" class="special">
    <div id="s2" class="special"></div>
  </div>
  <div>
    <div id="s3" class="special"></div>
  </div>
</div>

我想用类似于$('#top').find('.special:not_nested')的方法找到#s1和#s3，但不包括#s2。在jQuery或XPATH中是否有可能实现？

我考虑使用jQuery自定义过滤器，如expr[':'].not_nested，但无法考虑顶级父元素($('#top') 在此情况下)，因为在#top的父级链中可能会有其他.special类。

[编辑] 我应该提到，现在我正在使用$.fn.children()进行递归调用，我认为这不是很有效率。

[编辑2] 测试通过的代码：

    var node = $('#top'),
    result = (node.find('.special').filter(function(){
       return !($(this).parent().closest(".special", node).length);
    }));

然而，如果“#top”本身具有“.special”类，则此方法无效。所以也许应该这样处理：

var node = $('#top'),
result= node.find('.special').filter(function(){
   var parent = $(this).parent().closest(".special", node);
   return !parent.length || parent.is(node);
});

- user1066127

Answer 1

另一个选择是使用 .children() 替代 .find()，但它会得到与 idrumgood 的解决方案相同的结果。

$('#top').children('.special')

编辑：我刚意识到#s3的嵌套情况，这可能适用于该情况：

$('#top').find('.special').filter(function(){
  return $(this).closest('.special').length === 0;
}).doSomething()

编辑2：这里你可以看到：

$('#top').find('.special').filter(function(){
   return !$(this).parent().closest(".special").closest("#top").length;
}).doSomething;

- Kevin B

---

我想我也错过了那一点。最新的编辑应该考虑到这一点。 - Kevin B

当我看到你的第二次编辑时，我正沿着那个方向思考。我认为如果你将它改为返回!$(this).parent().closest(".special", $("#top")).legnth，它会起作用。我需要评估这种方法与我现在所做的方法之间的性能差异。我将把你的答案标记为正确答案，因为它应该返回正确的集合。 - user1066127

好的想法，它可以解决#top本身的.special情况 - 但是#top只是这里的一个示例，并且在实际情况中将是一个变量。请查看我的edit2，关于#top本身有.special，您有什么改进的想法吗？我不确定检查的正确性。 - user1066127

只有当 #top 具有 .special 类时才有效，它在您的原始情况下无效。 - Kevin B

整个情况的复杂性在于，如果当前元素与 .closest() 中的选择器匹配，.closest() 将返回当前元素。 - Kevin B

Answer 2

$('#top > .special');中的>表示只选择直接子元素。

除非您的代码中还有一个嵌套在次级div中的#s3，否则我不确定您是否真正想要您所要求的内容。

- idrumgood

---

#s3没有嵌套在另一个“.special” div中。我试图选择未嵌套的“.specials”，而不是未嵌套的div。这就是提出这个问题的原因... - user1066127

看看 Kevin B 的回答。在 .filter 函数中使用一个函数来测试 .special 父级应该可以解决问题。 - idrumgood

请看我在Kevin B的回答下面的评论，为什么过滤器不起作用。我原始问题的最后一部分也解释了这个问题。 - user1066127

Answer 3

如果特别是那些 div 元素，你可能想尝试使用带有空格的 CSS 选择器，例如

".one .three" and ".one" 

对于像这样的东西

<div class="one">
    <div class="two">
         <div class="three">

- Adam Grant