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

您在图片加载回调中创建了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('');
}

Img加载和嵌套的div

2 个答案: