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(); 
});

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(); 
});

• javascript
• jquery
• html
• css

• Create a jsfiddle – Dejan.S Commented Aug 2, 2014 at 15:46
• 1 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 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 Commented Aug 2, 2014 at 15:55
• @kimWong Provide jsfiddle link – Rashmin Javiya Commented Aug 2, 2014 at 16:01

4 Answers 4

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.

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

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

There is no need of that plicated 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");
});

Try This:

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