尝试使用Javascript动态更改CSS失败。为什么？_Javascript_Jquery_Css

尝试使用Javascript动态更改CSS失败。为什么？

javascript jquery css

尝试使用Javascript动态更改CSS失败。为什么？,javascript,jquery,css,Javascript,Jquery,Css,我用一个基于PHP的服务器端程序制作了一个简单的公告板系统，该程序生成JSON响应对于客户端，我选择使用jQuery动态生成所有HTML代码 <body> <ol class="list" id="viewList"></ol> $(document).ready(function () { $.getJSON("list.php", function (json) { var nPosts = json.length; for (i

我用一个基于PHP的服务器端程序制作了一个简单的公告板系统，该程序生成JSON响应

对于客户端，我选择使用jQuery动态生成所有HTML代码

<body>
<ol class="list" id="viewList"></ol>

$(document).ready(function () {
  $.getJSON("list.php", function (json) {
    var nPosts = json.length;
    for (i = 0; i < nPosts; i++) {
        $('<ol/>', {
            class: "viewPost",
            id: "post" + i
        }).appendTo("#viewList");
        $('<li/>', {
            class: "viewAuthor",
            id: "author" + i,
            text: json[i].authorName
        }).appendTo("#post" + i);
        $('<li/>', {
            class: "viewEmail",
            id: "email" + i,
            text: json[i].authorEmail
        }).appendTo("#post" + i);
    }
  });
  //Problem HERE:    
  var post0 = document.getElementById("post0");
  post0['style']['border-top-width'] = '0px';
});

问题是，当加载文档时，这些元素不会生成，因此jquery没有任何记录表明这些元素存在

所以要解决这个问题，必须在jquery中使用委托方法，比如

$(document).on('click',"class_or_id_which_is_created_runtime", function(e){
    //your code here 
    });

也可以在创建这些元素时添加javascript函数

$('<ol/>', {
        class: "viewPost",
        id: "post" + i onClick=blah();
    }).appendTo("#viewList");

$（“”{
类：“viewPost”，
id:“post”+i onClick=blah（）；
}).appendTo（“#视图列表”）；

问题在于，加载文档时，不会生成这些元素，因此jquery没有这些元素存在的任何记录

所以要解决这个问题，必须在jquery中使用委托方法，比如

$(document).on('click',"class_or_id_which_is_created_runtime", function(e){
    //your code here 
    });

也可以在创建这些元素时添加javascript函数

$('<ol/>', {
        class: "viewPost",
        id: "post" + i onClick=blah();
    }).appendTo("#viewList");

$（“”{
类：“viewPost”，
id:“post”+i onClick=blah（）；
}).appendTo（“#视图列表”）；

您可能想看看CSS伪类

：第一个子类，而不是用javascript这样做：
ol li {
/*CSS properties for all elements here*/
}

ol li:first-child {
/* Specific CSS properties for the first element here */
}

注意：另请参见对您有用的：最后一个孩子和nth-child（）
注2：请注意，这仅受IE9支持…
而不是以这种方式（使用javascript）执行，您可能希望了解CSS伪类：第一个子类：
ol li {
/*CSS properties for all elements here*/
}

ol li:first-child {
/* Specific CSS properties for the first element here */
}

注意：另请参见对您有用的：最后一个孩子和nth-child（）
注意2：请注意，这仅在IE9中受支持…
在内存中创建集合，只需检查索引是否为0，并在循环中添加适当的样式，并在构建后附加所有内容：
$(document).ready(function () {
    $.getJSON("list.php", function (json) {
        var elems = $([]);

        $.each(json, function (index, value) { // assuming it's an array
            var ol = $('<ol />', {
                'class' : 'viewPost',
                id      : 'post' + index
            }),
            li1 = $('<li />', {
                'class' : 'viewAuthor',
                id      : 'author' + index,
                text    : value.authorName
            }),
            li2 = $('<li />', {
                'class' : 'viewEmail',
                id      : 'email' + index,
                text    : value.authorEmail
            });

            if (index === 0) ol.css('border-top-width', '0px');

            elems = elems.add(ol.append(li1, li2))
        });

        elems.appendTo('#viewList');
    });
});

$（文档）.ready（函数（）{
$.getJSON（“list.php”，函数（json）{
变量元素=$（[]）；
$.each（json，函数（索引，值）{//假设它是一个数组
变量ol=$（''{
'class'：'viewPost'，
id:'帖子'+索引
}),
li1=$（“”{
“类”：“视图作者”，
id:'作者'+索引，
文本：value.authorName
}),
li2=$（“”{
“类”：“查看电子邮件”，
id:'电子邮件'+索引，
文本：value.authorEmail
});
if（index==0）ol.css（'border-top-width'，'0px'）；
elems=elems.add（ol.append（li1，li2））
});
元素。附录（“#视图列表”）；
});
});
在内存中创建集合，只需检查索引是否为0，在循环中添加适当的样式，并在构建后附加所有内容：
$(document).ready(function () {
    $.getJSON("list.php", function (json) {
        var elems = $([]);

        $.each(json, function (index, value) { // assuming it's an array
            var ol = $('<ol />', {
                'class' : 'viewPost',
                id      : 'post' + index
            }),
            li1 = $('<li />', {
                'class' : 'viewAuthor',
                id      : 'author' + index,
                text    : value.authorName
            }),
            li2 = $('<li />', {
                'class' : 'viewEmail',
                id      : 'email' + index,
                text    : value.authorEmail
            });

            if (index === 0) ol.css('border-top-width', '0px');

            elems = elems.add(ol.append(li1, li2))
        });

        elems.appendTo('#viewList');
    });
});

$（文档）.ready（函数（）{
$.getJSON（“list.php”，函数（json）{
变量元素=$（[]）；
$.each（json，函数（索引，值）{//假设它是一个数组
变量ol=$（''{
'class'：'viewPost'，
id:'帖子'+索引
}),
li1=$（“”{
“类”：“视图作者”，
id:'作者'+索引，
文本：value.authorName
}),
li2=$（“”{
“类”：“查看电子邮件”，
id:'电子邮件'+索引，
文本：value.authorEmail
});
if（index==0）ol.css（'border-top-width'，'0px'）；
elems=elems.add（ol.append（li1，li2））
});
元素。附录（“#视图列表”）；
});
});
请发布一个JSFIDLE。当通过javascript/AJAX生成大量HTML的时候，明智的做法是使用类似knockout.js的库来更轻松地进行数据绑定/模板制作。我只是好奇为什么$（'post0'）.css（…）没有生效……属性class
与“class”
类似并不奇怪？好奇你在哪里找到CSS属性border type width
？请发布一个JSFIDLE。当通过javascript/AJAX生成大量HTML的时候，明智的做法是使用像knockout.js这样的库更容易地进行数据绑定/模板制作。我只是好奇为什么$（'post0'）.CSS（…）未生效…属性class
与“class”
类似不是理所当然的吗？好奇您在哪里找到CSS属性边框类型宽度
？如果有助于解决问题，请勾选答案；）奇怪的是，typeof document.getElementById（“post0”）=“undefined”返回false。如果没有生成元素，那么typeof值将是未定义的，不是吗？我认为它将返回false，当java作为不存在的对象时，我们尝试在它上运行一些函数调用，同样抛出Null Posiple异常，我们如何才能做不存在的元素的类型…如果你帮助你解决问题，请勾选答案。奇怪的是，typeof document.getElementById（“post0”）=“undefined”返回false。如果没有生成元素，那么typeof值将是未定义的，不是吗？我认为它将返回false，当java作为不存在的对象时，我们尝试在它上运行一些函数调用，同样抛出Null Posil异常。我们如何做不存在的元素的类型。这是目前唯一可行的答案，但我想不出原因。这是目前唯一可行的答案，但我无法理解。为什么？看起来很有效率。但是，如果我有两个不同的列表，我希望它们有两种不同的样式，会怎么样？这是因为我用id命名每个元素。我想如果我正确命名它们，我以后可以访问它们，就像我写的“post0”。如果我更改li的样式，那么它将对两个列表都生效，对吗？看起来非常有效。但是如果我有两个不同的列表，我希望它们有两个d呢