Question

我正在从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>"));

}

希望得到帮助，并提前感谢： - ）

Answer 1

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

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

一般来说，只编写CSS更可取，而不是尝试动态构建它并在命令中添加命令。在理想情况下，脚本除了添加/删除类之外什么都不做。

Answer 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操作速度慢（相对）且资源密集程度更高。

jquery css不会使用ajax

2 个答案: