Img加载和嵌套的div

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>

我已经能够用这个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

您在图像加载回调中创建lis，然后将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('');
}