jQuery .not method not working as expected

Question

I have some HTML markup for a set of menu controls that is basically as follows. As you will note, the markup in each <div class="row"> repeats. This repeating code is that same for each menu control set.

<div id="menuModal">
    <div class="row">
        <div class="col-xs-6">
           <i>Control Icon</i>
           <span>Control Label</span>
        </div>
        <div class="col-xs-2">
           <i>Control Icon</i>
           <span>Control Label</span>
        </div>
        <div class="col-xs-2">
           <i>Control Icon</i>
           <span>Control Label</span>            
        </div>
        <div class="col-xs-2">
           <i>Control Icon</i>
           <span>Control Label</span>            
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
           <i>Control Icon</i>
           <span>Control Label</span>
        </div>
        <div class="col-xs-2">
           <i>Control Icon</i>
           <span>Control Label</span>
        </div>
        <div class="col-xs-2">
           <i>Control Icon</i>
           <span>Control Label</span>            
        </div>
        <div class="col-xs-2">
           <i>Control Icon</i>
           <span>Control Label</span>            
        </div>
    </div>
</div>

I'm setting the color of each div class="col-xs-6"> control label, EXCEPT for the first of these labels with the following jQuery selectors and method:

$( "#menuModal" ).find( "div.row > div.col-xs-6 > span" ).not( "div.row:eq(0) > div.col-xs-6 > span" ).css( "color", "#669900" );

The jQuery statement above sets the label color of EVERY div class="col-xs-6" label, including the first one. I can't figure out why the .not method selector won't work.

Any ideas? I'm banging my head on this...

That's actually weird. A possible explanation is that perhaps jQuery allows only *simple selectors* for `filter` and `not`. — Salman A, Aug 15 '16 at 17:56

score 1 · Answer 1 · answered Aug 15 '16 at 17:46

1

You may exclude the first row like this:

$( "#menuModal" ).find( "div.row:not(:first) > div.col-xs-6 > span" )

answered Aug 15 '16 at 17:46

Ashkan Mobayen Khiabani

33,575
33
102
171

yep, I know. but I thought this one is shorter. I did exact the same change today in my own code ;) – Ashkan Mobayen Khiabani Aug 15 '16 at 17:50

score 1 · Answer 2 · answered Aug 15 '16 at 17:46

1

You can simply use like this:

$( "#menuModal" ).find( "div.row:not(:first) > div.col-xs-6 > span" )
     .css( "color", "#669900" );

answered Aug 15 '16 at 17:46

Bhojendra Rauniyar

83,432
35
168
231

score 1 · Answer 3 · answered Aug 15 '16 at 18:02

1

You can use native CSS selectors instead:

$("#menuModal div.row ~ div.row > div.col-xs-6 > span")

This will skip first div.row even if it is not the first child.

answered Aug 15 '16 at 18:02

Salman A

262,204
82
430
521

interesting what `div.row ~ div.row` means? – Denis Matafonov Aug 15 '16 at 18:04
It is [the general sisbling combinator](http://stackoverflow.com/q/10782054/87015) – Salman A Aug 15 '16 at 18:07

score 0 · Answer 4 · answered Aug 15 '16 at 17:52

0

$( "#menuModal" ).find( "div.row > div.col-xs-6 > span" ).slice(1).css( "color", "#669900" );

answered Aug 15 '16 at 17:52

Parithiban

1,656
11
16

jQuery .not method not working as expected

4 Answers4