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