如何 select 没有特定祖先元素的元素

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 选择器来获得不具有 class .box.

祖先元素的输入

这是期望的结果：

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

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

最后的objective就是递归调用theSuperFunction

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

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

Answer 1

您可以使用 JQuery filter() to filter according to your desired result and parentsUntil() 在选择器中使用 class '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>

Note: .not($selector.find('> input')) will extract the #root input while it has a .box class

如何 select 没有特定祖先元素的元素

How to select elements that do not have a specific ancestor element

jquery

jquery-selectors