3

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?

Thanks

$.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
  • 123
  • 3
  • 11

3 Answers3

5

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).

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

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.

Hope this helps

Ethan Hayon
  • 346
  • 1
  • 9
  • Thanks for the response. Can i say this is the best way of doing it? – Sri Ram May 29 '13 at 21:33
  • I personally would prefer to use a templating engine, but it depends how many times you need to do it. Honestly, it's OK if its a rare occurrence, but if you need to do this more than two or three times, I would render the HTML using a template engine such as Mustache.JS (https://github.com/janl/mustache.js/) – Ethan Hayon May 29 '13 at 21:34
2

Instead of appending each line you could store it in a variable like below, and append it all together:

content = '';

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

And so on.

And then append content in the end. Just put it into your function.

jah
  • 1,265
  • 10
  • 21
-1

If you want that all elements are in the article tag, you should write:

.append(
   $( '<article class="preview"> )
   .append( ... )
)
benestar
  • 552
  • 4
  • 12