将 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>");

或

$('.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");

在这里演示。

Answer 2

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

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

演示：小提琴

注意：另请注意，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");