如何选择没有特定祖先元素的元素

Question

看看这个例子：

<div id="root" class="box">
    <div class="box">
        <input letter="A"></input>
        <input letter="B"></input>
    </div>
    <div id="subroot" class="box">
        <div class="useless_class">
            <input letter="B"></input>
            <div class="useless_class">
                <input letter="D"></input>
            </div>
            <div class="box">
                <input letter="F"></input>
            </div>
        </div>
    </div>
    <input letter="E"></input>
</div>

我需要一个 jQuery 选择器来获得不具有 .box 类的祖先元素的输入。

这是想要的结果：

input:
    searchInputsInElement($("#root"))
output:
    <input letter="E"></input>

input:
    searchInputsInElement($("#subroot"))
output:
    <input letter="B"></input>
    <input letter="D"></input>

最终目标是递归调用theSuperFunction。

################################################# #############################
＃ 解决了 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ######################
################################################# #############################

感谢@Shubanker，我制作了this 最终代码（看看console.log 结果）。

Answer 1

您可以使用 JQuery filter() 根据您想要的结果进行过滤，并使用 parentsUntil() 在选择器中搜索类 'box' 的父级。

function theSuprFunction($selector){
   return $selector.find('input').filter(function(){
       return $(this).parentsUntil($selector,'.box').length===0 
   });
}

您还可以将.filter() 与.parent() 和hasClass 一起使用

theSuprFunction($('#root'));

function theSuprFunction($selector){
   $selector.find('input').filter(function(){
       return !$(this).not($selector.find('> input')).parent().hasClass('box');
   }).css('background' , 'red');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root" class="box">
    <div class="box">
        <input value="A" letter="A"/>
        <input value="B" letter="B"/>
    </div>
    <div id="subroot" class="box">
        <div class="useless_class">
            <input value="B" letter="B"/>
            <div class="useless_class">
                <input value="D" letter="D"/>
            </div>
            <div class="box">
                <input value="F" letter="F"/>
            </div>
        </div>
    </div>
    <input value="E" letter="E"/>
</div>

注意：.not($selector.find('> input')) 将提取 #root 输入，而它有一个 .box 类