Question

我希望使用变量i，该变量在for循环中增加，以在mako模板中的div中创建唯一的id。

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 

结果运行的JavaScript当HTML希望：

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

等 相反，我得到：

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

有什么建议？

按照下面的建议，我改变了代码

$('#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>"); 

现在，我得到一个错误信息： 语法错误：之后参数列表 失踪）打破这个错误]

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

带照片上的箭头

FINALLY !! 我最终不得不在jQuery命令之外定义整个变量，因为它一直在jquery href中的+号出现问题。我使用下面的代码来获得所需的结果。

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 

Answer 1

更改此：

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

到：

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

请注意，如果该网页的DOCTYPE是不是HTML5，ID必须以字母开头。

---

$('#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>");