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>');    
                    });

Answer 1

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

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

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

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

当然，还有更好的方法可以做到这一点，例如使用像Mustache.JS这样的模板引擎，但这至少应该让它适合你。

希望这有帮助

Answer 2

您可以将它存储在下面的变量中，而不是追加每一行，并将它们全部附加在一起：

content = '';

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

等等。

然后将内容添加到最后。把它放到你的功能中。

Answer 3

如果您希望所有元素都在文章标记中，您应该写：

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

Jquery追加 - 打开和关闭标签

3 个答案: