jquery css 不能与 ajax 一起使用答案

【问题标题】：jquery css wont work with ajaxjquery css 不能与 ajax 一起使用
【发布时间】：2013-07-14 20:41:54
【问题描述】：

我正在从 ajax 制作一个列表，这部分工作得很好。我也在检查 sreenwidth 并相应地更改我的一些 div 的宽度，但是当我使用 ajax 时无法让它工作......

这是我的工作：

$(document).ready(function(){

    var screenwidth = $(window).width();
    swidth = screenwidth - 20;

    $("#thelist li").css("width", swidth+"px");

    $.getJSON('linktomyphppage.php', function(data) {

        var array = [];

        $.each(data, function (i, val){

            array.push($("#thelist").append("<li>"+val.fname+" "+val.lname+"</li>"));

        });

    });

});

我的 json 看起来像这样：

[{"fname":"Peter","lname":"Hanson"},{"fname":"Michael","lname":"Bird"}]

json 部分工作得很好，但它就像根本没有得到 CSS 部分一样。如果我这样做，它可以工作，但是我不使用 json：

for (var i = 0; i < 2; i++) {

    array.push($("#thelist").append("<li>"+val.fname+" "+val.lname+"</li>"));

}

希望得到帮助，并在此先感谢 :-)

【问题讨论】：

我猜是因为你在创建之前使用#thelist li..只需更改jQuery CSS的位置并将其放在最后..
你能用一个例子构建一个 JsFiddle 吗？带有 swidth 的 console.log 显示什么？也许您没有得到 swidth 的有效响应？你也应该var swidth 我不认为这是问题
css() 将style 属性添加到元素，这样新元素就不会拥有它。只需将 css 部分移动到 json 请求回调的末尾即可。

标签： jquery css json

【解决方案1】：

为了避免通过脚本设置CSS的时间依赖性，只需定义一个规则：

#thelist li {
    position: relative;
    right: 20px; 
}

一般来说，最好只编写 CSS，而不是尝试动态构建它并使用命令将其插入到整个代码中。在理想情况下，脚本只会添加/删除类。

【讨论】：

【解决方案2】：

试试这个；

$(document).ready(function(){
    var screenwidth = $(window).width();
    swidth = screenwidth - 20;

    $.getJSON('linktomyphppage.php', function(data) {
        var array = []
            html  = '';

        $.each(data, function (i, val){
            html +=  "<li style='width:"+ swidth +"px;'>"+val.fname+" "+val.lname+"</li>";
        }

        $("#thelist").append(html);
    });
});

您应该在创建后将样式设置为li。

并且执行单个 append 是一种很好的做法，因为多个 DOM 操作很慢（相对而言）并且需要更多资源。

【讨论】：