1

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

}

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

4

2 回答 2

0

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

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

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

于 2013-07-15T03:10:44.867 回答
0

尝试这个;

$(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 操作很慢（相对）并且更占用资源。

于 2013-07-15T07:49:50.090 回答