javascript - 如何在 div 的 id 中传递 JavaScript 变量(进入 twig 循环)？

Question

如何在 div 的 id 中传递 JavaScript 变量(进入 twig 循环)？

这是我尝试过的方法，但没有成功:

<script type="text/javascript">
     id = 0;
</script>
{% for element in parent.elements %}
     <div id="mydiv">
         <script>
         document.getElementById('mydiv').id('mydiv'+id);
         id++;
         </script>
    </div>
{% endfor %}

期望的结果(如果有 3 个元素):

<div id="mydiv0">
</div>
<div id="mydiv1">
</div>
<div id="mydiv2">
</div>

Answer 1

当 php 尝试创建一个 html 页面并将其发送到客户端时，twig 代码在服务器中执行。然后，客户端(浏览器)执行 javascript。因此，当 javascript 运行时，您已经创建了三个 div，所有 id 均为“mydiv”。由于 HTML 不能有多个具有相同 id 的元素，因此此 HTML 无效。

您想要的是访问 twig for 循环中的索引。您可以将其与 loop.index 一起使用多变的。

{% for element in parent.elements %}
    <div id="mydiv{{loop.index}}">         
    </div>
{% endfor %} 

如果您的 ID 以“mydiv0”开头很重要，您还可以使用 loop.index0。