在使用嵌套循环的HTML中,有没有一种方法可以获取外部循环的值?

huangapple go评论59阅读模式
英文:

Is there a way to get the values of outer loops when using nested loops in html?

问题

目前弹出窗口的ID重复使用,并且“编辑”按钮仅在第一个“项目”内起作用。我想要使用外部循环的值来创建弹出窗口的唯一ID。有更好的方法吗?

当前布局列出了所有项目,每个项目内列出了所有订单,每个订单内列出了所有行项目。

示例:

项目名称
   --> 订单编号
      --> 行项目
      --> 行项目
   --> 订单编号
      --> 行项目
      --> 行项目

以下是我的代码:

{% for project in projects %}
  ...

  {% for order in project.orders %}
    ...
    
    {% for lineItem in order.line_items %}
    <td>
      <button onclick="editRow(this, '{{ loop.index }}'), openPopup('{{ loop.index }}')" class="remove-button" style="background: #00e50b">编辑</button>
      <div class="popup" id="popup{{ loop.index }}">
        <div class="popup-content">
          <h2 style="color: #000000">编辑新的预计到达时间/备注</h2>
          <form action="/manage_stock" method="POST" style="display: none;">
            ...
          </form>
        </div>
      </div>
    </td>
    {% endfor %}

    ...
  {% endfor %}

  ...
{% endfor %}
英文:

Currently the id of the popup is used repeatedly and the Edit button only works inside the first "project" . I would like to use the values of the outer loops as well to create a unique id for the popup. Are there better ways to do this?

The current layout lists all projects inside each project all the orders and inside each order the line items.

Example:

PROJECT NAME
   --&gt; ORDER NUMBER
      --&gt; LINE ITEM
      --&gt; LINE ITEM
   --&gt; ORDER NUMBER
      --&gt; LINE ITEM
      --&gt; LINE ITEM

Here is my code:

{% for project in projects %}
  ...

  {% for order in project.orders %}
    ...
    
    {% for lineItem in order.line_items %}
    &lt;td&gt;
      &lt;button onclick=&quot;editRow(this, &#39;{{ loop.index }}&#39;), openPopup(&#39;{{ loop.index }}&#39;)&quot; class=&quot;remove-button&quot; style=&quot;background: #00e50b&quot;&gt;Edit&lt;/button&gt;
      &lt;div class=&quot;popup&quot; id=&quot;popup{{ loop.index }}&quot;&gt;
        &lt;div class=&quot;popup-content&quot;&gt;
          &lt;h2 style=&#39;color: #000000&#39;&gt;Edit New ETA / Comments&lt;/h2&gt;
          &lt;form action=&quot;/manage_stock&quot; method=&quot;POST&quot; style=&quot;display: none;&quot;&gt;
            ...
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/td&gt;
    {% endfor %}

    ...
  {% endfor %}

  ...
{% endfor %}

答案1

得分: 2

你可以使用 loop.parent.loop.index 和/或 loop.parent.loop.parent.loop.index 来访问 Twig 中外部循环的索引。

{% for project in projects %}
   {% set project_index = loop.index %}
   {% for order in project.orders %}
      {% set order_index = loop.index %}
      {% for lineItem in order.line_items %}
         复合索引:{{ project_index }}-{{ order_index }}-{{ loop.index }}
      {% endfor %}
   {% endfor %}
{% endfor %}
英文:

You can use loop.parent.loop.index and/or loop.parent.loop.parent.loop.index to access to outer loop indexes for Twig

<h3>EDIT</h3>

So, if you are using Jinja and it doesn't support parent loop index, you can try to save it in a variable:

{% for project in projects %}

   {% set project_index = loop.index %}

   {% for order in project.orders %}

      {% set order_index = loop.index %}
    
      {% for lineItem in order.line_items %}

      Composite index: {{ project_index }}-{{ order_index }}-{{ loop.index }} 

      {% endfor %}

   {% endfor %}

{% endfor %}

huangapple
  • 本文由 发表于 2023年5月28日 01:20:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76348131.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定