使用JQuery更改同一类中所有元素的CSS样式

Question

我想使用类Liregion2更改所有div的所有background-color 。 我只想更改div背景颜色，而不是li 。 我的代码只更改了一个div元素！ 我怎样才能影响到所有人？

这是我的HTML5代码：

<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>  

这是JQuery：

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

Answer 1

您不需要遍历每个元素。 尝试这个，

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

Answer 2

css方法在幕后遍历集合，无需使用each循环。 同样，您的标记无效， li元素应该是ul / ol元素的子元素。 div元素应替换为上述元素之一（ 尽管这不是语义标记） 。

看来您只想操纵父元素的css属性。 在这种情况下，可以使用.closest()或.parent()方法：

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

建议避免使用内联样式，这会使标记无法维护。 您可以声明CSS类，并使用jQuery removeClass和addClass方法添加/删除它们。

Answer 3

不需要那种复杂的代码， .css()函数本身会循环访问元素，并将.css()应用于所有元素。

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

Answer 4

尝试这个：

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