using variables in place of id names in jquery

Question

I desire to use a variable i that is incremented in a for loop to create unique id's in div's in a mako template.

var i=0;
    % for p in row.photos: 
    %if not p.PRIVATE:              
    /* setup div's for photo containers*/

    $('#photos').append("<div id='+i+' class='thumbnailimage'></div>"); 
    $('#+i+').append("<div id='+i+container' class='thumb_container'></div>");  
    $('#+i+container').append("<div id='+i+thumb' class='large_thumb'></div>");
    $('#+i+thumb').append("<div class='large_thumb_border'></div>");
    $('#+i+thumb').append("<div class='large_thumb_shine'></div>");

    /*insert the image*/
    $(document.createElement("img")).attr({ "src": "${tg.url('photo/%s/%s' % (p.PHOTOINDEX))}" }).appendTo('#+i+'thumb'');

    i++;


    %endif
% endfor

Result hoping for in the html when the javascript is run:

<div id='photos'>
    <div id='1'class='thumbnailimage'>
        <div id='1container' class='thumb_container'>

etc. Instead I get:

<div id='photos'>
    <div id='+1+' class...>
    </div>
</div><!--end photos-->

Any suggestions?

Following the suggestions below, I changed the code to

$('#photos').append("<div id="'photo'+i+" class='thumbnailimage'></div>"); 
$("#'photo'+i+").append("<div id="'container'+i+" class='thumb_container'></div>");  
$("#'container'+i+").append("<div id="'thumb'+i+" class='large_thumb'></div>");
$("#'thumb'+i+").append("<div class='large_thumb_border'></div>");
$("#'thumb'+i+").append("<div class='large_thumb_shine'></div>");

Now I get an error message: SyntaxError: missing ) after argument list [Break On This Error]

$('#photos').append("<div id="photo+i+" class='thumbnailimage'></div>");

with arrow on the p in photo

FINALLY!! I ended up having to define the whole variable outside of the jQuery command as it kept having problems with the + sign in the jquery href. I used the following code to obtain the desired results.

    var i=0;

    % for p in row.photos:
     var photo='photo'+i;
     var photoId="#"+photo;
     var container='container'+i;
     var containerId="#"+container;
     var thumb='thumb'+i;
     var thumbId="#"+thumb;
       $('#photos').append("<div id="+photo+" class='thumbnailimage'></div>"); 
       $(photoId).append("<div id="+container+" class='thumb_container'></div>");  
       $(containerId).append("<div id="+thumb+" class='large_thumb'></div>");
       $(thumbId).append("<div class='large_thumb_border'></div>");   
       $(thumbId).append("<div class='large_thumb_shine'></div>");
       $(document.createElement("img")).attr({ "src": "${tg.url('photo/%s/%s' % (row.GISNUM, p.PHOTOINDEX))}" }).prependTo(thumbId);
% endfor

I have also tried the following format: id='(+i+)', id='(+i+'container')' — stuartz, Aug 10 '12 at 16:03

Ram · Accepted Answer · 2012-08-10T16:26:52.133

6

Change this:

$('#photos').append("<div id='+i+' class='thumbnailimage'></div>");

to:

$('#photos').append("<div id='"+i+"' class='thumbnailimage'></div>");

Please note that if the doctype of the page is not HTML5, IDs must begin with a letter.

$('#photos').append("<div id='"+i+"' class='thumbnailimage'></div>"); 
$('#'+i).append("<div id='"+i+"container' class='thumb_container'></div>");  
$('#'+i+'container').append("<div id='"+i+"thumb' class='large_thumb'></div>");
$('#'+i+'thumb').append("<div class='large_thumb_border'></div>");
$('#'+i+'thumb').append("<div class='large_thumb_shine'></div>");

edited Aug 10 '12 at 16:26

answered Aug 10 '12 at 16:01

Ram

143,282
16
168
197

2

+1 for mentioning that IDs must begin with a letter, although I would recommend that in general. Here is a [post](http://stackoverflow.com/a/79022/1405830) that covers some of the details. – Zhihao Aug 10 '12 at 16:07
Thanks for the quick response. This works on the first div, but on the second div...I get an error: yntaxError: missing ) after argument list[Break On This Error] $("#+i+").append("
"); – stuartz Aug 10 '12 at 16:15
@user1516104 You should change all the quotation marks where there is a `i` variable, for example `$("#+i+")` should be `$("#"+i).something()` – Ram Aug 10 '12 at 16:23
It looks like when I add double quotes with single quotes inside for the id="'something'+i" that the function sees the double quote as the closing quote for the function. See the new example I gave above... – stuartz Aug 10 '12 at 17:03

using variables in place of id names in jquery

1 Answers1