CSS不是选择器不起作用[重复]答案

【问题标题】：CSS not selector not working [duplicate]CSS不是选择器不起作用[重复]
【发布时间】：2016-12-24 01:14:50
【问题描述】：

我正在尝试选择除某些 div.class 中的输入之外的所有输入。我不知道为什么它不能正常工作。我的结构如下所示。以及为什么选择器 :not 不起作用。我该怎么做才能从“排除”div中排除所有输入。因为我只想选择输入：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>

【问题讨论】：

所有输入都在一个没有exclude类的div内
也有内部 div .. 被选中
但在页面中我有多个 div 和输入，但我想选择所有输入，而 .exclude 中没有输入。我想这一行 console.log($("div:not(.exclude) input").length);返回：2（i1，i2）
@j08691 - jQuery 选择器就像 CSS 选择器（当然还有一些添加）
@JaromandaX 但是这个问题的上下文只是 jQuery。 css 标签应该用于实际涉及样式的问题。关于选择器的问题有jquery-selectors 和css-selectors。

标签： javascript jquery html jquery-selectors

【解决方案1】：

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

或

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

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

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

【讨论】：

【解决方案2】：

在您的 HTML 结构中：

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

每个<input> 都位于至少一个不具有“排除”类的<div> 中。因此，您的选择器正在工作，但没有得到您想要的结果。

相反，以简单的方式限定选择的输入：

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

该选择器将首先选择所有<input> 元素（以及<div> 元素内的元素），然后排除所有<input> 元素，这些元素在DOM 中的某个位置上方具有“排除”类的元素.

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

【讨论】：

【解决方案3】：

我在您的 HTML 中标记了不属于 exclude 类的 div，这就是为什么您的 console.log($("div:not(.exclude) input").length); 上有 4 个输入

您可以filter 输出具有exclude 类的父项的输入：

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>

【讨论】：

【解决方案4】：

拿着这个：

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>

【讨论】：

【解决方案5】：

问题：有没有类的内部div，它们也满足选择器。

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

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

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

然后将脚本改为

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

【讨论】：