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

Posted 2023-05-09

【中文标题】如何选择没有特定祖先元素的元素

【英文标题】：How to select elements that do not have a specific ancestor element

【发布时间】：2019-06-10 14:28:37

【问题描述】：

看看这个例子：

<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 结果）。

【问题讨论】：

#root.box > input 和 #subroot.box input .. > 表示直接孩子

@Mohamed-Yousef 您指定的第二个选择器不会匹配任何元素，因为没有input 元素是#subroot 的直接后代。

@Mohamed-Yousef，谢谢，但我需要它与目标和根之间的无限 dom 一起工作。我不会为每种可能性做#root.box > .abc > .dev > .mdr > ... > input：/

@BenM 是的，我从第二个选择器中删除了> .. 谢谢

@Mohamed-Yousef，请看我的编辑，在你的例子中，第二个也会返回 F 输入。

【参考方案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 类

【讨论】：

如果您不介意 .. 我尝试编辑了您的答案 .. 无需添加另一个答案 .. 如果您认为它没用，您可以将其删除 .. 谢谢

@Mohamed-Yousef - 感谢您的输入，您的解决方案检查其父级不是 .box 的输入，除非父级本身被赋予选择器，但是操作要求是检查所有父级，直到选择器- 1 级并省略输入，如果任何父级具有.box，如所需结果中清楚显示的那样，运行您的 sn-p 与 OP 所需的结果不匹配。

我明白你的意思@Shubanker，我测试了你的代码和我的代码，我确切地知道你在说什么。我添加了我的代码，因为我从 OP cmets 了解到他需要选择这三个输入..也许我误解了..但到目前为止，OP没有回复让我们知道哪个对他有用..我打算删除我的代码，但让我们拭目以待，看看OP是否回复:-)。 . 你可以随意删除/编辑我的代码:-) .. 祝你有美好的一天:-)