css не применяется к jquery append

Question

Я пытаюсь загрузить содержимое динамически из json-файла. Проблема в том, что CSS не будет применяться к этому контенту. Вот мой код:

<div id="main"> 
    <div id="produkter_menu"> 
    <ul id="listContent"> 
    </ul> 
    </div> 

<script> 
$.getJSON('js/products.json', function(data) { 

    for (i=0; i<4; i++) { 
     for(index in data) { 
      var content1 = new Array (Object.keys(data[index])[i]); 
     } 
     $("#listContent").append("<li>" + content1[0] + "</li>"); 
    } 
    } 

    ); 
</script> 

код CSS:

.produkter_menu ul { 
margin: 0; 
padding: 0; 
width:50%; 
list-style-type: none; 
} 

.produkter_menu ul li a { 
text-decoration: none; 
color: #000; 
padding: 25px 11px; 
background-color: #fff; 
display:block; 
border: 1px solid #cacaca; 
height: 30px; 
} 

.produkter_menu ul li a:visited { 
color: #000; 
} 

Браузер просто отображает элементы списка.

Еще один вопрос: всегда ли полезно динамически читать содержимое из json-файла?

Благодарим за помощь.

Answer 1

HTML-теги используют "идентификатор" вместо atributes "класса", просто изменить ваши CSS селекторов Примера: .produkter_menu ul к #produkter_menu ul

Надеются, что это помогает !!

Answer 2

Использование #produkter_menu вместо .produkter_menu, потому что вы пытались выбрать несуществующий класс

CSS-# используется для выбора id атрибутов в HTML

в то время как

CSS-. используется для выбора class атрибуты в HTML

Вот пересмотренный пример вашего кода

http://jsfiddle.net/

#produkter_menu ul { 
margin: 0; 
padding: 0; 
width:50%; 
list-style-type: none; 
} 

#produkter_menu ul li a { 
text-decoration: none; 
color: #000; 
padding: 25px 11px; 
background-color: #fff; 
display:block; 
border: 1px solid #cacaca; 
height: 30px; 
} 

#produkter_menu ul li a:visited { 
color: #000; 
} 

Answer 3

Во-первых, ваш CSS использует селекторов класса, но вы никогда не назначить этот класс в список ваших элементов. Попробуйте изменить CSS для этих селекторов:

#listContent ul 
#listContent ul li a 
#listContent ul li a:visited 

Во-вторых, если ваш массив контента на самом деле включает в себя «а» тегов разметки, он не ссылается ваш CSS, потому что ваши точки CSS к «а» дочерние элементы Элементы 'li' элементов 'ul', которые принадлежат элементу #listContent. Таким образом, вам необходимо либо изменить селектор CSS для:

#listContent ul li 

Или вам нужно изменить JavaScript следующим образом:

$("#listContent").append("<li><a>" + content1[0] + "</a></li>"); 

Если массив содержание не содержит «а» тегов разметки, вы можете игнорировать вторая часть моего ответа, но вам все равно нужно скорректировать селектор CSS.

Answer 4

Для вашего CSS вопрос, вы должны проверить на Google «CSS селекторы», чтобы понять разницу между кодом и классом (подсказка: «». Вы должны заменить ваш на „#“, и он должен работать

По другому вопросу: Всегда ли полезно динамически читать содержимое из json-файла? Не всегда!

Проблема, которая может возникнуть у вас, будет связана с безопасностью.Кому вы хотите разрешить доступ к данным, содержащимся в файле? Использование серверного языка для отправки этих данных обеспечит его защиту (asp, php, ...)