cannot display comment list using jquery

Question

Just want to display comment list in the following way but something is wrong with my code and I cannot get expected result. Could you please check it and help me to find the mistake.

enter image description here

I get following result:

enter image description here

var item = $('<div>');

$.each(data.results, function(i, res) {                    

  var photo = $('<div>'),
      block1 = $('<div style="float: left;">'),
      block2 = $('<div>'),
      title = $('<h4>'),
      info = $('<p>');

  photo.html('<img src="xyz">');
  title.html('<hr/>'+res.name+','+res.country);
  info.html(res.comment_text);
  block1.append(photo); 
  block2.append(title, info);                   
  item.append(block1, block2);

});

$("#comments").html(item);

Bram Vanroy · Accepted Answer · 2014-09-12 17:46:08Z

1

This seems to be a clearing issue. You need to clear the parent divs. You can easily do so by adding a clear class to those items and applying the following CSS:

.clear:after {
    content: "";
    display: table;
    clear: both;
}

Here is a test case.

It would have been better if you supplied the output HTML and preferably a fiddle to play with. Now you forced us to figure it out all by ourselves. Make your questions as clear and to the point as possible, so people will answer to you more quickly and thoroughly.

answered Sep 12, 2014 at 17:46

Bram Vanroy

28.9k29 gold badges151 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Egregory · Accepted Answer · 2014-09-12 18:14:07Z

1

First off your selectors are bad, you have 3 vars that are calling the same thing. Use this as a guideline for your selectors. jQuery Selectors Also it will be helpful to know what is failing exactly, maybe paste some HTML so we can better help you.

Edit: Try removing the block1 and block2 vars and see how it looks. With those selectors they are appending the photo and title info to the very first div. Try using the selector $(this) instead of block1 and block2.

Edit2: Ok so what is going on is your item.append(block1, block2); part is adding the blocks you create to the first div.

EDIT3: You need to create a new div and add the new blocks to create the new "item" Something along the lines of item.append("< /div>< div>"+ photo + title + info+'< /div>')

Edit 4: Without knowing your html I can't really write any code for your situation I can only assume and guess.

edited Sep 12, 2014 at 18:14

answered Sep 12, 2014 at 16:40

Egregory

2182 silver badges9 bronze badges

2 Comments

EducateYourself Over a year ago

tried in the way you described but still did not get the expected result.

EducateYourself Over a year ago

I tried in that way but no result. Maybe you can write the code so that I could understand what do you mean.

j08691 · Accepted Answer · 2014-09-12 16:48:13Z

0

You should use stylesheets over inline styles, but essentially you just need to clear the float you're creating.

Change:

var item = $('<div>');

to:

var item = $('<div style="clear:left">'),

edited Sep 12, 2014 at 16:48

answered Sep 12, 2014 at 16:41

j08691

209k33 gold badges269 silver badges281 bronze badges

2 Comments

EducateYourself Over a year ago

I have already used float:left for block1. Photo is inside the div block1. I also edited my code in the way you described but nothing changed.

EducateYourself Over a year ago

still did not get expected layout

Víctor Manuel Monsalve Retamal · Accepted Answer · 2014-09-12 17:32:09Z

0

where are you closing your elements? try with this code:

var item = $('<div/>');

$.each(data.results, function(i, res) {                    

    var photo = $('<div/>'),
        block1 = $('<div style="float: left;"></div>'),
        block2 = $('<div/>'),
        title = $('<h4/>'),
        info = $('<p/>');

    photo.html('<img src="xyz"/>');
    title.html('<hr/>'+res.name+','+res.country);
    info.html(res.comment_text);
    block1.append(photo); 
    block2.append(title, info);                   
    item.append(block1, block2);

});

$("#comments").html(item);

answered Sep 12, 2014 at 17:32

Víctor Manuel Monsalve Retamal

3052 silver badges11 bronze badges

Collectives™ on Stack Overflow

cannot display comment list using jquery

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related