3

我有一个这样的 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>');    
                    });
4

3 回答 3

4

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 之类的模板引擎，但这至少应该可以为您工作。

希望这可以帮助

于 2013-05-29T21:29:55.740 回答
2

您可以将其存储在如下变量中，而不是附加每一行，然后将它们全部附加在一起：

content = '';

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

等等。

然后在最后追加内容。只需将其放入您的功能中即可。

于 2013-05-29T21:33:48.453 回答
-1

如果您希望所有元素都在文章标签中，则应编写：

.append(
   $( '<article class="preview"> )
   .append( ... )
)
于 2013-05-29T21:29:46.380 回答