jQuery如果类不存在，则更改CSS值

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> 

Answer 1

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> 

Answer 2

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>