CODEWITHSUNDEEP
javascriptjqueryhtml
EducateYourself
EducateYourself

Reputation: 979

cannot display comment list using jquery

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

Upvotes: 0

Views: 295

Answers (4)

Egregory
Egregory

Reputation: 218

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.

Upvotes: 1

Bram Vanroy
Bram Vanroy

Reputation: 28457

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.

Upvotes: 1

V&#237;ctor Manuel Monsalve Retamal
V&#237;ctor Manuel Monsalve Retamal

Reputation: 305

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

Upvotes: 0

j08691
j08691

Reputation: 207901

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">'),

Upvotes: 0

Related Questions