jQuery Change CSS value if class not present

Question

I'm trying to create a lille script to go trough my page and check if a class is present in any <div>. If the class is present then there will be no action.

It will look for class="blue" and if it find it it will do nothing. If it doesn't fint class="blue" it will change background color for class="yellow". What it does it change the background color for class="yellow" not matter what. What is wrong?

$("div").each(function() {
  if (jQuery(this).attr('class') != undefined && jQuery(this).hasClass('blue')) {} else {
    $('.yellow').css('background', 'green')
  }
});

.blue {
  background: blue;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  width: 100px;
  height: 100px;
}

.yellow {
  background: yellow;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
  Blue
</div>

<div class="red">
  Red
</div>

<div class="yellow">
  Yellow
</div>

$('.yellow').css('background', 'green'); would get the same result. — Ori Drori
– Ori Drori, Commented Sep 20, 2018 at 20:51
jQuery(this).attr('class') != undefined <-- why are you doing this? — epascarello
– epascarello, Commented Sep 20, 2018 at 20:58
Your code is saying, hey the first div has the class blue.... next one.... hey the class is not blue.... — epascarello
– epascarello, Commented Sep 20, 2018 at 21:00

yaakov · Accepted Answer · 2018-09-20 21:08:32Z

2

One liner... :)

http://jsfiddle.net/yak613/bcgajp6q/

Basically, you want that if a blue is there, the .yellow is green. Otherwise, it stays yellow.

You can see what happens when the blue is there by going to the fiddle (^above) and uncommenting the blue.

if(!$(".blue").length) $(".yellow").css('background-color', 'green');

.blue {
  background: blue;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  width: 100px;
  height: 100px;
}

.yellow {
  background: yellow;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <div class="blue">
  Blue
</div> -->
<div class="red">
  Red
</div>

<div class="yellow">
  Yellow
</div>

edited Sep 20, 2018 at 21:08

answered Sep 20, 2018 at 20:56

yaakov

4,7274 gold badges29 silver badges55 bronze badges

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

4 Comments

Simon Jensen Over a year ago

I just need it the other way around but I like your approach. This finds the blue and returns green. I need it to check that blue doesn't exist and then change the value on the other css-class.

yaakov Over a year ago

So if blue doesn't exist, then change the .yellow? Ok

Simon Jensen Over a year ago

I've got it! Thanks a lot! The ! was the missing part! I will approach with your script :)

VXp Over a year ago

You mean: "Basically, you want that if blue is NOT there, the .yellow is green."

Obsidian Age · Accepted Answer · 2018-09-20 20:54:11Z

All you need to do is simply check if the target element doesn't have the .blue class (with if (!$(this).hasClass('blue'))).

This can be seen in the following:

$("div").each(function() {
  if (!$(this).hasClass('blue')) {
    $('.yellow').css('background', 'green')
  }
});

.blue {
  background: blue;
  width: 100px;
  height: 100px;
}

.red {
  background: red;
  width: 100px;
  height: 100px;
}

.yellow {
  background: yellow;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
  Blue
</div>

<div class="red">
  Red
</div>

<div class="yellow">
  Yellow
</div>

Collectives™ on Stack Overflow

jQuery Change CSS value if class not present

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related