jquery img加載和嵌套divs

Question

我試圖實現新聞源。當頁面第一次加載20個新聞項目和朋友圖片數據等加載，一切都很好。

然後當用戶更新他們的狀態時，我想在新聞源中顯示這個以及任何新的朋友狀態。這是我要創建動態

... 
<div id="doNews" class="colwrap st-leftmenu"> 
    <ul id="theNews" class="newsList"> 
     <li class="newsItem"> 
      <div class="st-col2"> 
      <img class="newsImage" src="profile/16/images/thumb/cloth.gif"> 
      </img> 
      </div> 
      <div class="st-col1"> 
      <div class="st-name">John Smith</div> 
      <!-- other user status divs --> 
      </div> 
     </li> 
     <!-- other lis --> 
    </ul> 

結構，我已經能夠創建這個jQuery的IMG部分：

function showStatus(data){ 
    var jsondata = $.parseJSON(data); 
    $('#doNews').empty(); 
    $('#doNews').append($('<ul/>', {"class": "newsList", id: "theNews"})); 
    $.each(jsondata, function(i, item){ 
     $('<img src="' + showpic(item[3]) + '" class="newsImage">') 
      .load(function(){ 
     $(this) 
      .appendTo($('#theNews')) 
      .wrap($('<li>', {"class": "newsItem"})) 
      .wrap('<div class="st-col2">'); 
     }); 
}); 
// $('#theNews li').each(function(){ 
//  $(this).append($('<div>', {"class": "st-col1"})); 
// }); 

$("#statustext").val(''); 
} 

然而，註釋掉部分似乎不工作（B/C的頁面已經加載？），如果我把它放在加載功能，<div class="st-col1">被附加到IMG這是不是我想要的...

包裹似乎看起來很有前途，但.. 。

請把我從痛苦中解救出來。

Answer 1

您在圖像加載回調中創建li，然後將div添加到li那裏。

$('<img src="' + showpic(item[3]) + '" class="newsImage">') 
    .load(function(){ 
     $(this) 
      .appendTo($('#theNews')) 
      .wrap($('<li>', {"class": "newsItem"})) 
      .wrap('<div class="st-col2">') 
      .closest('li') 
      .append($('<div>', {"class": "st-col1"})); 
     }); 
}); 

Answer 2

嘗試

function showStatus(data){ 
    var jsondata = $.parseJSON(data); 
    $('#doNews').empty(); 
    $('#doNews').append($('<ul/>', {"class": "newsList", id: "theNews"})); 
    $.each(jsondata, function(i, item){ 
     $('<img src="' + showpic(item[3]) + '" class="newsImage">') 
     .load(function(){ 
      $('<li>', {"class": "newsItem"}) 
      .append($('<div />', {"class": "st-col2"}).append(this)) 
      .append($('<div>', {"class": "st-col1"})) 
      .appendTo('#theNews'); 
     }); 
    }); 
    // $('#theNews li').each(function(){ 
    //  $(this).append($('<div>', {"class": "st-col1"})); 
    // }); 

    $("#statustext").val(''); 
}