jquery - CSS 选择器将不包含在 div 中的输入与特定类相匹配？

Question

我有这样的情况

<div class="hidden">
  <input name="bar-foo" value="test"> 
</div>
<div class="hidden">
  <input name="bar-foo-baz" value="test2">
</div>
<div class="nothidden">
  <input name="bar-foo" value="test3"> <!-- should be selected -->
</div>
<div class="nothidden">
  <input name="foo-bar-baz" value="test4"> <!-- should be selected -->
</div>

我需要匹配包含单词 foo 和 bar 的输入，而不是包含在“隐藏”类的 div 中。

input[name*="foo"][name*="bar"] 

匹配所有四个输入。

:not(.hidden) input[name*="foo"][name*="bar"]

在我看来，应该匹配未包含在“.hidden”类中的输入，但事实并非如此。我怎样才能达到这个结果？

这是一个jsfiddle https://jsfiddle.net/8dLbz5ws/1/

Answer 1

您的第二个选择器 :not(.hidden) input[name*="foo"][name*="bar"] 匹配所有输入，因为它们都包含在 some 中 没有隐藏类的元素(例如 body 或另一个父 div)。

您可以通过更具体地解决问题:

:not(.hidden) > input[name*="foo"][name*="bar"]

这将过滤掉那些具有 .hidden 直接 parent 的人。

<小时/>

编辑

一些评论者想知道如何选择不包含在 任何 .hidden 元素(不一定是直接父元素)中的所有相关输入。这是一个更棘手的问题。以下内容:

input[name*="foo"][name*="bar"]:not(.hidden input)

似乎不起作用，我认为是因为 :not 只允许在内部使用相对简单的选择器。我能想到的唯一方法是更新所有选定的输入，然后在任何 .hidden 元素中取消更新它们:

input[name*="foo"][name*="bar"] { color: red; }
.hidden input[name*="foo"][name*="bar"] { color: black; }

恐怕只有默认设置(即颜色:黑色)统一时这才有效。