jQuery append-打开和关闭标签 [英] Jquery append - Opening and closing a tag

问题描述

我有一个像这样的jquery块.呈现html后，我看到<article>标记立即打开和关闭，<div class=bar>也以相同的方式打开和关闭.我在他的代码段中做错了什么吗?有更好的方法来实现这一目标吗?

I have a jquery block like this. After the html is rendered i see that the <article> tag opens and closes immediately, same way, <div class=bar> opens and closes immediately. Am i doing anything wrong in his piece of code. Any better way to implement this one?

谢谢

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

推荐答案

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

Jquery's append function takes a DOM node, HTML string, or javascript object as input. So when you call your first append, there is no closing tag for the article, so it builds it into a complete DOM node by adding the closing tag for you. Then, when you go to append your next item, it actually appends completely after the previous DOM node (after the closing tag).

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

Instead, I recommend you build the HTML string first, then append it all at once.

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

For example, you should do the following:

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

当然，有更好的方法来执行此操作，例如使用诸如Mustache.JS之类的模板引擎，但这至少应该使其适合您.

Of course, there are better ways of doing this, such as using a templating engine such as Mustache.JS, but this should at least get it working for you.

希望这会有所帮助

这篇关于jQuery append-打开和关闭标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！