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

Question

我是CSS和學習的新手。

我的問題是

如果我的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>

如果我要在具有ID“ theTableContainer”的div中加載html，

將html附加到div后，我將在xhr成功的回調函數中應用css

如下

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

有沒有更好的辦法 ？

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

我的工作示例

Answer 1

更好的方法是添加要添加的CSS類，然后使用addClass動態添加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> 

Answer 2

您可以始終在CSS中添加樣式：

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

更新的小提琴 。

另一種方法是基於對css進行分組 ：

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

Answer 3

您可以使用所需的所有CSS屬性創建一個類：

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

並應用：

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

這是jfiddle。