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输入

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

1 个答案: