jquery img load и вложенные divs

Question

Я пытаюсь реализовать ленту новостей. Когда на первой странице загружается 20 новостей с информацией о друге pic и т. Д., И все хорошо.

Затем, когда пользователь обновляет свой статус, я хочу показать это и любой новый статус друга в ленте новостей. Это структура, я хочу, чтобы создать динамически

... 
<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> 

, и я был в состоянии создать IMG часть с этой JQuery:

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 s на обратном вызове загрузки изображения, а затем добавьте 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(''); 
}