无法使用jquery显示评论列表

Question

只是想以下列方式显示评论列表，但我的代码出错了，我无法得到预期的结果。你能检查一下，帮我找错。

我得到以下结果：

var item = $('<div>');

$.each(data.results, function(i, res) {                    

  var photo = $('<div>'),
      block1 = $('<div style="float: left;">'),
      block2 = $('<div>'),
      title = $('<h4>'),
      info = $('<p>');

  photo.html('<img src="xyz">');
  title.html('<hr/>'+res.name+','+res.country);
  info.html(res.comment_text);
  block1.append(photo); 
  block2.append(title, info);                   
  item.append(block1, block2);

});

$("#comments").html(item);

Answer 1

首先关闭你的选择器是坏的，你有3个vars调用相同的东西。将此作为选择器的指导。 jQuery Selectors 此外，了解哪些内容完全失败会有所帮助，也许会粘贴一些HTML，以便我们更好地为您提供帮助。

编辑：尝试删除block1和block2变量并查看其外观。通过这些选择器，他们将照片和标题信息附加到第一个div。尝试使用选择器$（this）而不是block1和block2。

编辑2：好的，那么你的item.append（block1，block2）是怎么回事;部分是将您创建的块添加到第一个div。

EDIT3 ：你需要创建一个新的div并添加新的块以创建新的“item”。与item.append相关的东西（“＆lt; / div＆gt;＆lt; div＆gt; “+照片+标题+信息+'＆lt; / div＆gt;'）

编辑4：在不知道您的HTML的情况下，我无法为您的情况编写任何代码，我只能假设并猜测。

Answer 2

这似乎是一个清算问题。您需要清除父div。您可以通过向这些项添加clear类并应用以下CSS来轻松完成此操作：

.clear:after {
    content: "";
    display: table;
    clear: both;
}

这是test case。

如果您提供输出HTML并且最好是小提琴，那会更好。现在你强迫我们自己解决这个问题。让您的问题尽可能清晰明确，以便人们更快更彻底地回答您。

Answer 3

你应该使用样式表而不是内联样式，但基本上你只需要清除你正在创建的浮动。

变化：

var item = $('<div>');

为：

var item = $('<div style="clear:left">'),

Answer 4

你在哪里关闭你的元素？试试这段代码：

var item = $('<div/>');

$.each(data.results, function(i, res) {                    

    var photo = $('<div/>'),
        block1 = $('<div style="float: left;"></div>'),
        block2 = $('<div/>'),
        title = $('<h4/>'),
        info = $('<p/>');

    photo.html('<img src="xyz"/>');
    title.html('<hr/>'+res.name+','+res.country);
    info.html(res.comment_text);
    block1.append(photo); 
    block2.append(title, info);                   
    item.append(block1, block2);

});

$("#comments").html(item);