Jquery 追加 - 打开和关闭标签

Question

我有一个像这样的 jquery block 。渲染 html 后，我看到 <article>标签立即打开和关闭，同样的方式，<div class=bar>立即打开和关闭。我在他的代码中做错了什么吗？有更好的方法来实现这个吗？

谢谢

$.each(filterresult.result, function(index, value) {
                              $('#newslist')
                              .append('<article class="preview">')
                              .append('<div class="bar">')
                              .append('<span class="left"><small>').append(value.dTime)
                              .append('</small></span><span class="right text-sm gray-text">')
                              .append(value.author)
                              .append('</span></div>').append('<h3 class="tighter"><a class="black" href="#">')
                              .append(value.title)
                              .append('</a></h3')
                              .append('<div class="media-block medium"><figure><span class="box blue">Products & Services</span><img src="http://placeholder.levelfivesolutions.net/140x105.png" alt="" title="" /></figure>')
                              .append('<div class="details">')
                              .append(value.teaser)
                              .append('<div class="bar"><span class="left"><a class="blue" href="#"><span class="gray-text">&raquo;</span> Read More</a></span><span class="right text-sm"><a class="comment-icon" href="#">12 Comments</a></span></div>')
                              .append('</div>')
                              .append('</div>')
                              .append('</article>');    
                    });

Answer 1

Jquery 的追加函数采用 DOM 节点、HTML 字符串或 javascript 对象作为输入。因此，当您调用第一个追加时，文章没有结束标记，因此它会通过为您添加结束标记将其构建为完整的 DOM 节点。然后，当您追加下一个项目时，它实际上完全追加到前一个 DOM 节点之后(结束标记之后)。

相反，我建议您先构建 HTML 字符串，然后一次将其全部附加。

例如，您应该执行以下操作:

var html = "<article class='preview'><div class='bar'><span class='left'><small>........";
$("#newlist").append(html);

当然，有更好的方法可以做到这一点，例如使用 Mustache.JS 等模板引擎，但这至少应该让它为您工作。

希望这有帮助