Jquery追加 - 打开和关闭标签

Question

我有一个jQuery块，就像这样。在渲染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>');    
                    });

- Sri Ram

---

不，这是一种预期的行为。 - zerkms

Answer 1

Jquery的append函数可以接受DOM节点、HTML字符串或JavaScript对象作为输入。因此，当您调用第一个append函数时，文章没有结束标签，它会通过为您添加结束标签来构建完整的DOM节点。然后，当您尝试附加下一个项目时，它实际上会在前一个DOM节点后面（即结束标签后）完全添加。

相反，我建议您先构建HTML字符串，然后一次性附加所有内容。

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

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

当然，还有更好的方法来完成这个任务，比如使用类似Mustache.JS的模板引擎，但是这个方案至少能让你实现它。

希望这能帮到你。

- Ethan Hayon

---

谢谢回复。我可以说这是最好的方法吗？ - Sri Ram

我个人更喜欢使用模板引擎，但这取决于你需要执行这样的操作的次数。老实说，如果这是一次性事件，那么没问题，但如果你需要做两三次以上，我建议使用Mustache.JS（https://github.com/janl/mustache.js/）这样的模板引擎来渲染HTML。 - Ethan Hayon

Answer 2

不要逐行添加，可以像下面这样将每一行存储在一个变量中，然后将它们全部拼接起来：

content = '';

content += '<article class="preview">';
content += '<div class="bar">';
content += '<span class="left"><small>'+value.dTime+'</small></span>';

等等就是如此。

然后在结尾添加内容。只需将其放入您的函数中即可。

- jah

Answer 3

如果您希望所有元素都在文章标签中，您应该编写以下代码：

.append(
   $( '<article class="preview"> )
   .append( ... )
)

- benestar