CSS 不是选择器不工作

Question

我正在尝试 select 除了某些 div.class 中的输入之外的所有输入。我不知道为什么它不能正常工作。我的结构如下所示。为什么 selector :not 不起作用。我能做些什么来排除来自 "exclude" div 的所有输入。因为我只想要 select 输入：i1,i2.

console.log($("div.exclude input").length);
console.log($("div:not(.exclude) input").length);
console.log($("div input").length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <div id="tab1">
  <div>
   <div>
    <input id="i1"/>
   </div>
   <input id="i2" />
  </div>
 </div>

<div id="tab2" class="exclude">
  <div>
   <div>
    <input  id="i3" />
   </div>
    <input  id="i4" />
  </div>
 </div>
</div>

Answer 1

我在你的 HTML 中标记了 div 而不是 exclude class，这就是你的 [=13= 有 4 个输入的原因]

您可以 filter 输出具有父级 exclude class 的输入：

console.log($("div.exclude input").length);
console.log($("div:not(.exclude) input").length);
console.log($("div input").length);

console.log($("input").filter(function() { return $(this).parents('.exclude').length > 0}).length);

$("input").filter(function() { return $(this).parents('.exclude').length > 0}).css('background', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <div id="tab1">
  <div>
   <div> 
    <input id="i1"/>
   </div>
   <input id="i2" />
  </div>
 </div>

<div id="tab2" class="exclude">
  <div>
   <div> <!-- This div is not with the class explude -->
    <input  id="i3" />
   </div>
    <input  id="i4" />
  </div>
 </div>
</div>

Answer 2

在您的 HTML 结构中：

<div id="tab2" class="exclude">
  <div>
   <div>
    <input  id="i3" />
   </div>
    <input  id="i4" />
  </div>
 </div>
</div>

每个 <input> 都在至少一个没有 class "exclude" 的 <div> 中。因此，您的 select 或是工作，但没有得到您想要的结果。

相反，限定输入 selected 的简单方法：

console.log($("div input:not(.exclude *)").length);)

selector 将首先 select 所有 <input> 元素（以及 <div> 元素内的元素），然后排除所有 <input> 元素在 DOM.

中某处具有 class "exclude" 的元素

如果在某些 <div> 中的原始限定符不是很重要，那么您只需要 "input:not(.exclude *)"。

Answer 3

$('input').not('.exclude *')

或

$('input:not(.exclude *)')

这些将获取所有输入，这些输入不是带有排除 class 的元素的后代。您可以更具体地了解哪些输入（可能只有某个 div 或 class 下的输入），但这应该可以让您排除正在寻找的内容。

你可以看到一个工作示例here

Answer 4

问题: 有内部 div 没有 class 但它们也满足选择器。

解决方案：将另一个 class 添加到您希望成为选择器一部分的 div，然后也使用这个新的 class ..喜欢

<div id="tab1" class="tabs"> 和

<div id="tab2" class="tabs exclude">

然后将脚本更改为

$("div.tabs:not(.exclude) input")

Answer 5

拿这个：

console.log($("div.table.exclude input").length);
console.log($("div.table:not(.exclude) input").length);
console.log($("div input").length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  
  <div id="tab1" class="table">
    <div>
      <div>
        <input id="i1"/>
      </div>
      <input id="i2" />
    </div>
  </div>

  <div id="tab2" class="table exclude">
    <div>
      <div>
        <input  id="i3" />
      </div>
      <input  id="i4" />
    </div>
  </div>
  
</div>

CSS 不是选择器不工作

CSS not selector not working

html

javascript

jquery

jquery-selectors