将 CSS 中的样式应用于新添加的元素答案

【问题标题】：Applying styles from CSS to newly appended elements将 CSS 中的样式应用于新添加的元素
【发布时间】：2013-12-23 15:44:16
【问题描述】：

我将一个元素动态添加到父 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() 函数中。

【问题讨论】：

【解决方案1】：

你需要在这里转义类名。

改变

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

到

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

或

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

带样式的演示：

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

或

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

【讨论】：

【解决方案2】：

您的字符串连接可能是问题所在，因为您的字符串文字包含在 "" 中，字符串中出现的任何 " 都必须转义

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

演示：Fiddle

注意：还要注意li 是ul 或ol 元素的有效子元素，因此some_div 必须是其中之一

【讨论】：

【解决方案3】：

试试这个

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

如果你想为这个元素应用特定的 css

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

如果你想应用基于类的 CSS

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

【讨论】：