jQuery append html element with variable string

Question

I'm a JQuery Newbie. I'm trying to append an object property( declared in an array form) to an html element like the following

HTML:

<div id="container">
<p>some text </p>
<p>some text </p>
<p>some text </p>
</div>

JQuery Script:

var obj{
property  :  {'apple', 'orange', 'banana'}
}

for(i=0; i<=2; i++){
$("#container p:eq("+i+")").append(obj.property[i]);
}

and hope to get this:

<p>some text apple</p>
<p>some text orange</p>
<p>some text banana</p>

There are no appending shown at all, though my Firebug console shows no error report.

What am I doing wrong? Also, is there any way to replace the for loop with .each(), if it's a better practice?

Thank you

Jason LeBrun · Accepted Answer · 2011-01-28 07:53:49Z

6

Your list of properties isn't correctly formed. A numerically indexed list literal is formed using square brackets, not curly brackets.

The code you posted should be giving you a syntax error. If it's not, it's possible that it's simply not getting executed at all.

Here's a fixed up version:


  var obj = {
    property  :  ['apple', 'orange', 'banana'] 
  }

  for(i=0; i<=2; i++){
    $("#container p:eq("+i+")").append(obj.property[i]);
  }

edited Jan 28, 2011 at 7:53

answered Jan 28, 2011 at 7:31

Jason LeBrun

13.3k3 gold badges48 silver badges42 bronze badges

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

Comments

Herohtar · Accepted Answer · 2011-01-28 07:54:36Z

As stated in another answer, obj should be defined as such:

var obj = {
  property : ['apple', 'orange', 'banana']
}

The for loop will work, but it seems better practice to use .each(), if for no other reason just because you don't have to hard-code the values -- if you use for, then if you ever change the number of properties, you'll have to go update that loop too. Here is how I would do it:

$("#container > p").each(function(i) { $(this).append(obj.property[i]); });

Collectives™ on Stack Overflow

jQuery append html element with variable string

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related