CSS not selector not working

Question

I'm trying to select all inputs except the inputs inside some div.class. I do not know why it does not work correctly. My structure looks something like below. And why selector :not not work. And what can I do to exclude all inputs from the "exclude" div. Because i want only select inputs: 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>

All inputs are inside a div which hasn't the class `exclude` — DaniP, Dec 23 '16 at 17:04
But In page I have multiple divs and inputs, but I want to select all inputs without inputs inside .exclude. I would like to this line console.log($("div:not(.exclude) input").length); return: 2 (i1, i2) — MiiiM, Dec 23 '16 at 17:07
@j08691 - jQuery selectors are just like CSS selectors (with some additions, sure) — Jaromanda X, Dec 23 '16 at 17:12
@JaromandaX But the context of this question is just jQuery. The `css` tag should be for questions that actually involve styling. There's `jquery-selectors` and `css-selectors` for questions about selectors. — Barmar, Dec 23 '16 at 17:15
@JaromandaX Just because jQuery's syntax is CSS-like doesn't mean this question is CSS related. — j08691, Dec 23 '16 at 17:18

score 2 · Accepted Answer · answered Dec 23 '16 at 17:08

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

or

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

These will grab all inputs which are not descendants of elements with the exclude class. You can get more specific on which inputs (maybe only the ones under a certain div or class) but this should get you the exclusion you're looking for.

You can see a working example here

score 1 · Answer 2 · answered Dec 23 '16 at 17:07

In your HTML structure:

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

each <input> is inside at least one <div> that does not have the class "exclude". Therefore your selector is working but it's not getting the result you want.

Instead, qualify the inputs selected the simple way:

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

That selector will first select all of the <input> elements (well the ones inside <div> elements), but then exclude all of <input> elements that have an element with class "exclude" somewhere above them in the DOM.

If the original qualifier of being inside some <div> isn't really important, then all you need is "input:not(.exclude *)".

score 0 · Answer 3 · answered Dec 23 '16 at 17:06

I marked inside your HTML the div that is not with the exclude class, and this is why you got 4 inputs on your console.log($("div:not(.exclude) input").length);

You can filter out the inputs that have parents with the 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>

Rajshekar Reddy · Answer 4 · 2016-12-23T17:14:50.133

0

Problem: there are inner divs which does not have the class and they satisfy the selector too.

Solution: Add another class to the divs which you want to be part of your selector and then use this new class too .. Like

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

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

And then change script to

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

edited Dec 23 '16 at 17:14

answered Dec 23 '16 at 17:09

Rajshekar Reddy

18,647
3
40
59

score 0 · Answer 5 · answered Dec 23 '16 at 17:09

Take this:

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 not selector not working

5 Answers5