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

Answer 1

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

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

Answer 2

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.

Answer 3

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

Answer 4

Try This:

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