add array keys with span tags

Question

i have an array like:

var totalNum = new Array('img', 'img', 'img', 'img');

now on the documentready i added a div in the html page like:

$('#mainid').after('<div id="button"></div>');

the problem is i want to add <span></span> tags with total numbers in totalNum array like:

<div id="button">
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
</div>

i tried with for(){} loop into the .after() but got the syntax error. My code is here:

jQuery('#mainid').after('<div id="button">' + 
        for(i=1;i<=totalNum.length;i++){
    jQuery('<span>'+i+'</span>').appendTo('#button');
}
    + '</div>');

@SeanCarruthers sorry now changed, it was a copy paste by me. — jogesh_pi
– jogesh_pi, Commented Feb 29, 2012 at 7:13
@SeanCarruthers Thanks for your quick reply. yes i am sure that was not my problem. — jogesh_pi
– jogesh_pi, Commented Feb 29, 2012 at 7:14

alex · Accepted Answer · 2012-02-29 07:14:31Z

2

You can't throw a for loop in the middle of string concatenation.

var button = $('#button');

$.each(totalNum, function(index) {
    $('<span />', { text: index + 1 }).appendTo(button);
});

I believe this has some benefits such as...

Not forcing the browser to parse HTML.
Caching a reference to the target element #button.
$.each() to me is more elegant than an explicit for loop.

answered Feb 29, 2012 at 7:14

alex

492k205 gold badges890 silver badges992 bronze badges

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

Comments

linuxeasy · Accepted Answer · 2012-02-29 07:24:25Z

1

jQuery('#mainid').after('<div id="button"></div>');

for(i=1;i<=totalNum.length;i++){
    jQuery('<span>'+i+'</span>').appendTo('#button');
}

OR

var tmpStr = '';
for(i=1;i<=totalNum.length;i++){
    tmpStr += '<span>'+i+'</span>';
}

jQuery('#button').append(tmpStr);

This would be a better approach to prevent the syntax error & append.

edited Feb 29, 2012 at 7:24

answered Feb 29, 2012 at 7:13

linuxeasy

6,4997 gold badges35 silver badges41 bronze badges

Comments

elclanrs · Accepted Answer · 2012-02-29 07:16:08Z

1

You can't concatenate a for loop like that! Also you forgot to declare i. Then is recomended to cache the length and append all html strings in a variable and append to object at last to avoid stressing the DOM as much as possible. You can do this:

var spans = ''; 
for (var i=1, len=totalNum.length; i<len; i++) {
    spans += '<span>'+ i +'</span>';
}
$('<div id="button">').append(spans).appendTo('#mainid');

answered Feb 29, 2012 at 7:16

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

Guffa · Accepted Answer · 2012-02-29 07:25:16Z

1

Use the map function to loop the array as an expression, and use join to concatenate the array items into a single string:

jQuery('#mainid').after(
  '<div id="button">' + 
  jQuery.map(totalNum, function(e,i){ return '<span>'+(i+1)+'</span>'; }).join('') +
  '</div>'
);

Demo: http://jsfiddle.net/Guffa/U48yP/

answered Feb 29, 2012 at 7:25

Guffa

703k111 gold badges760 silver badges1k bronze badges

1 Comment

jogesh_pi Over a year ago

wow, i didn't knew about this. but 'linuxeasy's answer also worked for me. But thanks a lot to aware about the .map() +1 ;)

Sean Carruthers · Accepted Answer · 2012-02-29 07:15:34Z

0

Try just:

jQuery('#mainid').after('<div id="button"></div>');

for( i=1; i<=totalNum.length; i++ ) {
   jQuery('#button').append('<span>' + i + '</span>');
}

I switched from .appendTo to .append, because that just seemed like an indirect way of doing things. This is a little more clear as to what we're doing.

answered Feb 29, 2012 at 7:15

Sean Carruthers

4142 silver badges10 bronze badges

Collectives™ on Stack Overflow

add array keys with span tags

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related