Применение стилей от 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. Это единственный способ сделать это?

Update:

$('.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(), поэтому я прошу, если есть способ, чтобы применить стили, которые уже определены в stylesheet, без необходимости переопределять их в функции 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>"); 

DEMO here.

Demo со стилем:

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

ИЛИ

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