CSS不選擇不工作

Question

我試圖選擇除某些div.class內的輸入之外的所有輸入。我不知道爲什麼它不能正常工作。我的結構如下圖所示。爲什麼選擇者：不行。我能做些什麼來排除「排除」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>

Answer 1

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

或

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

這些將抓住它不與排除類元素的後代的所有輸入。您可以更具體地瞭解哪些投入（可能只是某個div或某個類下的投入），但這會讓您排除您需要的排除項目。

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

Answer 2

我打上你的HTML裏面的div不與exclude類，這就是爲什麼你在你的console.log($("div:not(.exclude) input").length);

可以filter出輸入了4個輸入，有父母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>

Answer 3

在你的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 *)"。

Answer 4

問題：還有哪些不具有類內的div，他們也滿足了選擇。

解決方案：添加另一個類到你想成爲你的選擇器的一部分的divs，然後使用這個新類。像

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