How to add a class to an element which has a class name not in array

Question

I'm trying to add a "disabled" class to an element which has a class name not in array, and I have an array output like this :

["xs", "xl", "s", "m"]

and the html markup like this:

<a href="js:;" class="pa_size xs" title="xs" data-select="pa_size" data-value="xs">XS</a>
<a href="js:;" class="pa_size xl" title="xl" data-select="pa_size" data-value="xl">XL</a>
<a href="js:;" class="pa_size s" title="s" data-select="pa_size" data-value="s">S</a>
<a href="js:;" class="pa_size m" title="m" data-select="pa_size" data-value="m">M</a>
<a href="js:;" class="pa_size l" title="l" data-select="pa_size" data-value="l">L</a>

I have tried something like this:

if ( $.inArray(val, array) !== -1 ) { ... }

or

$.each(array, function() { ... }

but no luck.

please show more context for where you are trying to use code shown. We can't help you resolve why without seeing how you are applying it — charlietfl
– charlietfl, Commented Jun 21, 2016 at 5:24
@mplungjan not complaining but using if ( $.inArray(val, array) !== -1 ) {...} should work in proper context is why i ask — charlietfl
– charlietfl, Commented Jun 21, 2016 at 5:28

Pranav C Balan · Accepted Answer · 2016-06-21 05:35:34Z

3

Generate multiple class selector using the array and avoid them using :not() pseudo-class or not() method in jQuery.

var classes = ["xs", "xl", "s", "m"];

$('a').not(classes.map(function(v) {
  // iterate and add `.` before each element
  return '.' + v; 
  // join using `,` to act them as multi selector
}).join(',')).addClass('class')

.class {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="js:;" class="pa_size xs" title="xs" data-select="pa_size" data-value="xs">XS</a>
<a href="js:;" class="pa_size xl" title="xl" data-select="pa_size" data-value="xl">XL</a>
<a href="js:;" class="pa_size s" title="s" data-select="pa_size" data-value="s">S</a>
<a href="js:;" class="pa_size m" title="m" data-select="pa_size" data-value="m">M</a>
<a href="js:;" class="pa_size l" title="l" data-select="pa_size" data-value="l">L</a>

Or even more simpler as @charlietfl suggested

var classes = ["xs", "xl", "s", "m"];

$('a').not('.' + classes.join(',.')).addClass('class')

.class {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="js:;" class="pa_size xs" title="xs" data-select="pa_size" data-value="xs">XS</a>
<a href="js:;" class="pa_size xl" title="xl" data-select="pa_size" data-value="xl">XL</a>
<a href="js:;" class="pa_size s" title="s" data-select="pa_size" data-value="s">S</a>
<a href="js:;" class="pa_size m" title="m" data-select="pa_size" data-value="m">M</a>
<a href="js:;" class="pa_size l" title="l" data-select="pa_size" data-value="l">L</a>

edited Jun 21, 2016 at 5:35

answered Jun 21, 2016 at 5:24

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

charlietfl Over a year ago

Even simpler $('a').not('.' + classes.join(',.'))

mplungjan Over a year ago

@charlietfl - even better for this example. I do like the map too though

Pranav C Balan Over a year ago

@TommyPradana : use removeClass('disabled')

Pranav C Balan Over a year ago

@TommyPradana : if you like to combine with them then use $('a').not('.' + classes.join(',.') + '.disabled').addClass('class')

Tommy Pradana Over a year ago

Thanks for all, :)

|

Collectives™ on Stack Overflow

How to add a class to an element which has a class name not in array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related