jQuery .addclass to multiple div

Question

I am trying to apply the class ".lightGray" that i defined earlier on to div 4,5,7,and this current one. Not sure what I am doing wrong!

$("#Div8").click(function(){$("#Div4", "#Div5","#Div7","#Div8").addclass(".lightGray");});

Burnette

Name of the method is .addClass(). – Swarey

Answer 1

Use .addClass("lightGray"); as .addClass() takes className not .className

and change

$("#Div4,#Div5,#Div7,#Div8")

to

 $("#Div4 ,#Div5, #Div7 ,#Div8")

see multiple selector

you code becomes

$("#Div8").click(function(){
$("#Div4 ,#Div5 ,#Div7 ,#Div8").addClass("lightGray");
                                          ^ //remove dot from here
});

Paryavi

$("#Div3").click(function(){$("div").css("background","beige");}); $("#Div4").click(function(){$(this).hide();}); $("#Div5").click(function(){$("#Div4").show();}); $("#Div6").click(function(){$(this).append("<p>I am alive!</p>");}); $("#Div8").click(function(){$("#Div4", "#Div5","#Div7","#Div8").addclass("lightGray");}); – Burnette

I am still having problem are my elements represented correctly? – Burnette

@RyanParker $("#Div4 ,#Div5 ,#Div7 ,#Div8") this is correct selector.Check updated code. – Paryavi

@TusharGupta: Yes, now it's correct, as you added the commas. – Emir

You have updated the answer several times, linked to the .addClass() doc, but didin't notice that OP is using addclass! – Swarey

Yeah, now it covers all the issues :) – Swarey

@RyanParker accept the answer if you are satisfied i.sstatic.net/uqJeW.png – Paryavi

How can i store all tags in an array which will be affected by addClass() method, and call the array inside addclass like addClass(arrayofElements). I tried to store it like arrayofElements=["#id1","#id"] but doesn't work. – Chopping

Answer 2

when you add a class you do not need the dot.

try this instead

$("#Div8").click(function(){$("#Div4, #Div5, #Div7, #Div8").addClass("lightGray");});

Phare

Answer 3

In all DIVS these I put a default class: changeClass, and maintain their individual IDS.

A instead of doing $("#Div4","#Div5","#Div7","#Div8") would suffice to make $(".changeClass).addClass("lightGray");

Classes can be used in more than one element at the same time and thus can manipulate several of these elements at once, saving time and lines of code.

Doloroso

Answer 4

You have made four separate selectors instead on one selector.

The commas should be inside the string:

$("#Div4,#Div5,#Div7,#Div8")

The method name is addClass, not addclass, and there shouldn't be a period before the class name:

$("#Div8").click(function(){$("#Div4,#Div5,#Div7,#Div8").addClass("lightGray");});

Emir

@RyanParker: It works fine when I test it: jsfiddle.net/7qXMx Check for any differences with your code. – Emir

Answer 5

Try this.

$("#Div8").click(function(){
 $("#Div4,#Div5,#Div7,#Div8").addClass("lightGray");  //removed exra quotes from selecter
                                                      //removed dot(.) from class name
                                                     //Changed *addclass* to **addClass**
});

Lapith

@RyanParker Have you wrapped the code with document ready handler? – Swarey

yes it has been! This is the code with the style area as well – Burnette

<style> body { width: 980px; margin: 0 auto; } div { margin: 15px; padding: 15px; cursor: pointer; } .lightGray { background-color: #cccccc; } .gold { background-color: gold; color: maroon; } </style> – Burnette

@RyanParker Div8 is present initially or added after DOM ready ? – Lapith

div8 is only first presented in this line. Should i make it "this" instead? – Burnette

No it's ok. try putting an alert inside the click event handeler. Also check for any console error. – Lapith