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>

我想找到＃s1和＃s3，而不是＃s2，有$（'＃top'）。find（'。special：not_nested'）。有可能使用jQuery吗？ XPATH？

我考虑过jQuery自定义过滤器，例如expr ['：']。not_nested，但无法弄清楚如何考虑顶级父级（在这种情况下为$（'＃top'）），因为可能存在其他.special类进一步在#top。的主链中。

[edit]我现在应该提一下，我正在使用$ .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

$('#top > .special'); >只是直接死者。

除了你的代码#s3也嵌套在辅助div中，所以我不确定你是否真的想要你所要求的。

Answer 2

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

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

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

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

Edit2：在这里你去：

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

Answer 3

如果它特别是那些div，你可能想尝试使用带空格的css选择器，比如

".one .three" and ".one"

这样的事情

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

jQuery / JavaScript：仅选择子级的第一个“层”

3 个答案: