將樣式從CSS應用到新添加的元素

Question

我將一個元素動態添加到父div。

$('.some_div').append("<li class="hi">hey!</li>") 

在我的CSS，

.hi { 
    color: white; 
} 

然而，由於<li class="hi">動態添加，它似乎是在CSS定義的樣式不會應用到的元素。所以，

$('.some_div').append("<li class='hi'>hey!</li>") 
$('li.hi').css({"color":"white"}); 

實際上會做的伎倆，但它似乎是多餘的，因爲風格已在CSS文件中定義。這是唯一的方法嗎？

更新：

$('.some_div').append('<li style="color:white" >hey!</li>') 

以上的工作，但因爲風格是在一個單獨的CSS文件中定義，它會是仍然是多餘的。我的問題是，是否有辦法避免這種冗餘。

在CSS

，

.some_div > li { 
    font-size: 20px; 
    background-color: 30px; 
    margin-right: 2px; 
} 

.hi { 
    color: white; 
} 

所有這一切，當我通過($).append()添加新元素將不會應用，所以我問，如果有以應用在一個已定義的樣式的方式樣式表，而不必在css()函數中重新定義它們。

Answer 1

你需要在這裏轉義類的名字。

變化

$('.some_div').append("<li class="hi">hey!</li>"); 

到

$('.some_div').append("<li class='hi'>hey!</li>"); 

OR

$('.some_div').append("<li class=\"hi\">hey!</li>"); 

DEMO here.

演示風格：

$('.some_div').append("<li style='color:green;'>hey!</li>"); 

OR

$('.some_div').append("<li>hey!</li>").find("li:last").css("color","yellow"); 

Demo here.

Answer 2

你的字符串連接可能是問題，因爲你的字符串是內""包圍的字符串中的"任何事件來轉義

$('.some_div').append('<li class="hi">hey!</li>') 

演示：Fiddle

注：也注意到，li是ul或ol元素有效的小孩，所以some_div必須是其中一方

Answer 3

試試這個

$('.some_div').append('<li class="hi">hey!</li>') 

如果你想申請特定的CSS此元素

$('.some_div').append('<li style="color:white" >hey!</li>') 

如果要基於類應用CSS

$('.hi').css("color","white");