Use JQuery to change all element's css style in same class

Question

I want to change all the background-color of all divs with the class Liregion2. I just want to change the div background color, not li. My code only changes one div element, though! How can I make it affect all of them?

Here is my HTML5 code:

<div class = "Liregion2" id = "LineBock1" style ="padding-bottom:3%;padding-left:10%;background-color:#ff9900"> 
 <li>
   <a href="#" id = "FirstLine" style="color:#fff;text-decoration: none" >1號線</a>
 </li>
</div>  
<div class = "Liregion2" id = "LineBock2" style ="padding-bottom:3%;padding-left:10%;">             
 <li>
   <a href="#" id = "SecondLine" style="color:#009999;text-decoration: none" >2號線</a>
 </li>
</div>  
<div class = "Liregion2" id = "LineBock3" style ="padding-bottom:3%;padding-left:10%;"> 
 <li>
   <a href="#" id = "ThirdLine" style="color:#ff3366;text-decoration: none" >3號線</a>
 </li>
</div>  
<div class = "Liregion2" id = "LineBock4" style = "padding-left:10%;">  
 <li>
  <a href="#" id = "ForthLine" style="color:#0066ff;text-decoration: none" >4號線</a>
 </li>
</div>

And here is the JQuery:

$('#FirstLine').click(function(){
    $('.Liregion2').each(function( index , element  ){
            $(element).css("background-color" , "transparent");
    });     
    event.stopPropagation(); 
});

css iterates through the collection behind the scenes, there is no need to use a each loop. Also your markup is invalid, li should be child of an ul/ol element. — Ram
– Ram, Commented Aug 2, 2014 at 15:47
You are using inline css and inline css cann't be overridden,secondly you have problems in your markup you are using <li> inside div its not possible like this you would have to use it inside <ul> <li></li> </ul>.Kindly fix your issues.write css in seperate style sheet and then include it as a class or as a id selector rather than using inline styles. — Husrat Mehmood
– Husrat Mehmood, Commented Aug 2, 2014 at 15:55

Ram · Accepted Answer · 2014-08-02 16:09:52Z

1

css method iterates through the collection behind the scenes, there is no need to use a each loop. Also your markup is invalid, li element should be child of an ul/ol element. The div elements should be replaced with one of the above elements (although it won't be a semantic markup.)

It seems you only want to manipulate css properties of the parent element. If this is the case, you can use .closest() or .parent() method:

// Do not miss the `event` object if you want to use it
$('.Liregion2 a').click(function(event) { 
    $(this).closest('.Liregion2').css("background-color" , "transparent");
    event.stopPropagation(); 
});

As a suggestion avoid using inline styles, it makes the markup unmaintainable. You can declare CSS classes, and use jQuery removeClass and addClass methods for adding/removing them.

edited Aug 2, 2014 at 16:09

answered Aug 2, 2014 at 15:56

Ram

145k16 gold badges174 silver badges201 bronze badges

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

2 Comments

Kim Wong Over a year ago

thank you, but can i use <ul><div><li></li></div></ul>? is it legal?

Ram Over a year ago

@KimWong You are welcome. Unfortunately, that's invalid. Each browser will parse it differently. I'd suggest using just one ul element with those lis as it's children. Then you can put your div elements (or whatever valid markup that is needed) as the li's descendants.

Rashmin Javiya · Accepted Answer · 2014-08-02 15:49:35Z

1

You dont need to loop through each element. try this,

$('#FirstLine').click(function(){
    $('.Liregion2').css("background-color" , "transparent");
    event.stopPropagation(); 
});

answered Aug 2, 2014 at 15:49

Rashmin Javiya

5,2223 gold badges31 silver badges49 bronze badges

1 Comment

Ram Over a year ago

This is better than using each (in this case), but it doesn't solve the problem.

Marco Bonelli · Accepted Answer · 2014-08-02 15:49:43Z

0

There is no need of that complicated code, the .css() function iterates through the elements by itself and applies CSSs to all the elements.

$('#FirstLine').click(function() {
    $('.Liregion2').css("background-color" , "transparent");
});

answered Aug 2, 2014 at 15:49

Marco Bonelli

71k21 gold badges129 silver badges153 bronze badges

Comments

mickzer · Accepted Answer · 2014-08-02 15:49:43Z

0

Try This:

$(document).on("click", "#FirstLine", function(){      
    $('.Liregion2').css("background-color" , "transparent");    
});

answered Aug 2, 2014 at 15:49

mickzer

6,3985 gold badges39 silver badges60 bronze badges

Collectives™ on Stack Overflow

Use JQuery to change all element's css style in same class

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related