jQuery/JavaScript : selecting first "layer" of children only

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() 的递归调用，我认为这不是很有效。

[edit2]测试的工作代码:

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

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;