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

Question

我想用classLiregion2更改所有divs的背景色。我只想更改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

不需要那种复杂的代码，。css（）函数自身遍历元素，并将css应用于所有元素。

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

Answer 2

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

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

Answer 3

匿名用户

css方法在幕后迭代集合，没有必要使用每个循环。此外，您的标记是无效的，li元素应该是ul/ol元素的子元素。div元素应替换为上述元素之一（尽管它不是语义标记）。

似乎您只想操作父元素的css属性。如果是这种情况，您可以使用。最近的（）或。父（）方法：

// 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类，并使用jQueryremoveClass和addClass方法添加/删除它们。