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 标签使用“id”而不是“class”属性，只需更改您的 css 选择器 示例：.produkter_menu ul 到 #produkter_menu ul

希望对你有帮助！

Answer 2

使用#produkter_menu 而不是.produkter_menu，因为您试图选择一个不存在的类

CSS # 用于在 HTML 中选择 id 属性

同时

CSS . 用于在 HTML 中选择 class 属性

这是您的代码的修改示例

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

其次，除非您的内容数组实际上包含“a”标签标记，否则您的 CSS 不会引用它，因为您的 CSS 指向属于“ul”元素的“li”元素的“a”子元素#listContent 元素。因此，您要么需要将 CSS 选择器更改为：

    #listContent ul li

或者你需要像这样改变你的javascript：

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

如果您的内容数组包含“a”标签标记，您可以忽略我回答的第二部分，但您仍然需要更正 CSS 选择器。

Answer 4

对于您的 CSS 问题，您应该查看谷歌“CSS 选择器”以了解 ID 和类之间的区别（提示：您应该将您的 '.' 替换为 '#'，它应该可以工作。

对于另一个问题：从 json 文件中动态读取内容总是好的吗？ 并非总是如此！

您可能遇到的问题与安全性有关。您希望允许谁访问文件中包含的数据？ 使用服务器端语言发送这些数据可以保护它（asp、php、...）