如何將CSS應用於動態HTML內容？

我的問題是，

如果在我所有的HTML內容加載與延遲可能是因爲Ajax請求的，如果我追加一條HTML響應已加載的div標籤;

如何將CSS應用於內部HTML。

讓說，我有和div標籤，

<div class="row"> 
    <div class="col-md-5 col-md-offset-2"> 
     <div id="theTableContainer"></div> 
    </div> 
</div>

如果我試圖加載在其div ID爲「theTableContainer」的HTML，

我會在XHR回調函數應用CSS的HTML後成功被附加到的div

如下

$("#theTableContainer table tr:gt(0)").each(function(){ 
     $(this).find("td:eq(2)"). 
      css("background-color","#8600e6"). 
      css("color","#F8F8FF"). 
      css("font-weight","bold"); 
});

有更好的方法嗎？

請在下面的鏈接中找到工作代碼。

My Working example

來源

2017-07-16 Rahul Shivsharan

更好的方法是添加您要添加，然後用addClass動態添加CSS CSS類。

$("#theTableContainer table tr").each(function(){ 
 
     $(this).find("td").addClass('background color font-weight'); 
 
});

.background { 
 
background-color: red; 
 
} 
 

 
.color { 
 
color: white; 
 
} 
 

 
.font-weight { 
 
font-weight: 'bold'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-5 col-md-offset-2"> 
 
     <div id="theTableContainer"> 
 
     <table> 
 
     <tr> 
 
     <td> 
 
      example 
 
     </td> 
 
     </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-07-16 15:03:42

您可以隨時添加在你的CSS樣式：

#theTableContainer table tbody tr td:nth-child(3){ 
    background-color: #8600e6; 
    color: #F8F8FF; 
    font-weight: bold; 
}

更新fiddle。

的另一種方法是基於grouping the css：

$(this).find("td:eq(2)").css({"background-color": "#8600e6", 
           "color":"#F8F8FF", 
           "font-weight":"bold"});

來源

2017-07-16 15:10:22 gaetanoM

你可以做一個類你想要的所有的CSS屬性：

.active { 
    background-color: #8600e6; 
    color: #F8F8FF; 
    font-weight: bold; 
}

，並將其應用：

$(this).find("td:eq(2)").addClass('active');

Here is jfiddle.

來源

2017-07-16 15:10:50

如何將CSS應用於動態HTML內容？

回答

相關問題