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> 

Я хотел бы найти # s1 и s3 #, но не # s2, с чем-то вроде $ ('# топ') найти ('специальные:. not_nested').. Возможно ли это с помощью jQuery? XPATH?

Я думал о пользовательских фильтрах jQuery, таких как expr [':']. Not_nested, но не могу понять, как принять во внимание верхний родитель ($ ('# top') в этом случае), потому что может быть другими .специальными классами далее в родительской цепочке #top.

[изменить] Я должен упомянуть прямо сейчас, я прибегаю к рекурсивному вызову $ .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') 

Edit: я просто понял, вложенность #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 2

$('#top > .special');> только прямые ушедшие.

Кроме вашего кода #s3 также вложен внутри вторичного div, поэтому я не уверен, действительно ли вы хотите, чтобы вы спросили.

Answer 3

Если это конкретно эти дивы, вы можете попробовать использовать селектор css с пробелами, например

".one .three" and ".one" 

что-то вроде этого

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