如何在速度模板的 for 循环中为 div 生成唯一的类名？答案

【问题标题】：How can I generate unique class name for div inside a for loop in velocity template?如何在速度模板的 for 循环中为 div 生成唯一的类名？
【发布时间】：2015-07-13 19:04:24
【问题描述】：

我的速度模板中有一个用于在网页上显示元素的 for 循环。我将它们包装在 div 中，但最终所有元素都有相同的 div 名称。如何确保所有 div 的所有元素都具有唯一的类名。

    #foreach($i in [0..$size])
        <div class= "styles">
             <span class="actor">$discoverActorConfs.get($i).actor</span>
             <span class="remove aui-icon aui-icon-small aui-iconfont-    remove" title="Remove project" data key="$discoverActorConfs.get($i).actor" onclick="transit_time_remove_proj('$discoverActorConfs.get($i).actor')">
             </span>

        </div>

这样我就可以在脚本标签中使用它时拥有唯一的类名。

<script>

    $(document).ready(function() {


            $('div.new-div, div.styles').connections();

            var connections = $('connection, inner');
            setInterval(function() { connections.connections('update') }, 100);
        });
    </script>

【问题讨论】：

拥有相同类名的项目是可以的。如果您希望能够分隔这些项目，您可以使用$i 变量并添加一个前缀，如item-$i。或者，您可以将此唯一标识符设置为 id 属性，从 html5 开始可能是数字。
为什么有唯一的类名？这有点与上课的目的相冲突。您应该为每个 div 设置唯一的 ID。
@NicoO 我必须使用 javascript 在这些元素上应用一些属性，所以我需要为它们设置单独的类名。
@user2900150 从 API 我看到了这个，$('div.child').connections({ from: '#parent' }).length;，这让我觉得，你不需要动态生成的类，有一个单独的类 class="styles" 并做到这一点，$('div.styles').connections({ from: 'div.new-div' }).length; 或具有唯一的类并将连接顺序颠倒为$( "[class^=div-]" ).each( function( index, element){ var elm = $(element); $('elm, div.new-div').connections(); });
感谢@SudhansuChoudhary：我实际上不需要生成多个类。您的解决方案运行良好。

标签： javascript jquery html css velocity

【解决方案1】：

拥有独特的课程有点与拥有课程的目的相冲突。您应该为每个 div 设置唯一的 ID。但是，如果您想生成独特的类，

#foreach($i in [0..$size])
        <div class= "styles-$i">
             <span class="actor">$discoverActorConfs.get($i).actor</span>
             <span class="remove aui-icon aui-icon-small aui-iconfont-    remove" title="Remove project" data key="$discoverActorConfs.get($i).actor" onclick="transit_time_remove_proj('$discoverActorConfs.get($i).actor')">
             </span>
      </div>

如果您选择使用唯一 ID，您可以这样做，

#foreach($i in [0..$size])
            <div class= "styles" id="div-$i">
                 <span class="actor">$discoverActorConfs.get($i).actor</span>
                 <span class="remove aui-icon aui-icon-small aui-iconfont-    remove" title="Remove project" data key="$discoverActorConfs.get($i).actor" onclick="transit_time_remove_proj('$discoverActorConfs.get($i).actor')">
                 </span>
    </div>

您所要做的就是附加 -$i 以确保 ID/类名是唯一的

【讨论】：