jquery css不會與ajax一起工作

我正在製作一個來自ajax的列表，該部分工作得很好。我也檢查sreenwidth並相應地改變一些我的div的寬度，但不能得到，當我使用AJAX它的工作...jquery css不會與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>")); 

}

盼望的幫助，在此先感謝:-)

來源

2013-07-14 Mansa

我想這是因爲你在創建之前使用'#thelist li'只需改變jQuery CSS的位置並將它放在最後.. – Bhavik

你能用一個例子來構建一個JsFiddle嗎？具有swidth的console.log顯示什麼？也許你沒有從swidth得到有效的迴應？並且你也應該''var varidth'''也不認爲這是問題 – alonisser

'css（）'將'style'屬性添加到元素中，所以新元素不會擁有它。只需將css部分移至json請求回調的末尾即可。 –

爲了避免設置的時間依賴性通過腳本的CSS，只是定義一個規則：

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

一般情況下，它更最好只寫CSS，而不是試圖動態地建立並撒上命令插入它在你的代碼。在理想的情況下，腳本除了添加/刪除類外什麼也不做。

來源

2013-07-15 03:10:44

試試這個;

$(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-15 07:49:50 Pratheep

jquery css不會與ajax一起工作

回答

相關問題