If an element contains a specific class, then set its display property to none

Question

I am attempting to utilize the hasClass method in JavaScript to determine whether a div should be hidden (display: none) or kept visible as usual.

Below is the snippet of code I currently have:

   if (!$('cool').hasClass('hot')) {
   }

If the class "hot" is present, I would like the div to be hidden. What code should I use to achieve this?

UPDATE: After reviewing the comments, I am still unsure about how hasClass functions, but it appears to check for HTML tags.

All I need is for it to verify whether a div has the "hot" class and then hide it if it does.

Answer 1

Answer №1

Instead of using an if statement, focus on selecting elements that meet your criteria from the start.

jQuery('cool.hot').addClass('foo'); // Assuming .foo has { display: none; }

Note: The HTML does not include any <cool> element.

Answer 2

Instead of using an if statement, focus on selecting elements that meet your criteria from the start.

jQuery('cool.hot').addClass('foo'); // Assuming .foo has { display: none; }

Note: The HTML does not include any <cool> element.

Answer 3

Another alternative is to utilize the :not() selector according to the original premise provided by the OP -

(It is assumed that 'cool' and 'hot' are CSS classes in this particular example)

$('.cool:not(.hot)').css({'display':'none'});

An additional approach would be to employ the .not() method -

$('.cool').not('.hot').css({'display':'none'});

Answer 4

Another alternative is to utilize the :not() selector according to the original premise provided by the OP -

(It is assumed that 'cool' and 'hot' are CSS classes in this particular example)

$('.cool:not(.hot)').css({'display':'none'});

An additional approach would be to employ the .not() method -

$('.cool').not('.hot').css({'display':'none'});