javascript - Img 加载和嵌套 div

Question

我正在尝试实现新闻源。当页面第一次加载 20 条新闻和 friend 图片数据等时加载，一切正常。

然后当用户更新他们的状态时，我想在新闻源中显示这个和任何新 friend 的状态。这是我要动态创建的结构

...
<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"> append 到不是我想要的 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"}));
      });
});