在 HTML Forloop 中检测每三个循环 - HTML - Django
Detect Every Third Loop in a HTML Forloop - HTML - Django
我有一个网站，在一个页面上有来自要打印的 for 循环的重复信息。问题是 forloop 中的每一项都是大约 10 行文本。当我去打印时，10 行文本有时会在页面之间中断。无论如何我都需要他们呆在一起，我试过“page-break-inside: avoid;”但我无法让它工作。然而，这有点无关紧要，因为我需要确保每个页面上只有三个块，因为 4 个已经超出了页边距。我的计划是很好地循环块并检测每三个循环并在其下方添加额外的间距以使其转到下一页。
问题：如何检测我的 html forloop 中的每三个循环？
{% for post in filter.qs %}
{% if forloop.first %}
<div style="position:relative; top: -12px; left: -2px; margin-bottom: 180px;">
<div style="position:absolute;left:21.79px;top:435.49px" class="cls_0030"><span class="cls_0030">{%if post.department%} {{post.department}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:435.54px" class="cls_014"><span class="cls_014">Inspection #</span></div>
<div style="position:absolute;left:355.58px;top:435.52px" class="cls_013"><span class="cls_013">{{ post.count_building }}</span></div>
<div style="position:absolute;left:21.70px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Date</span></div>
<div style="position:absolute;left:96.52px;top:453.52px" class="cls_013"><span class="cls_013">{%if post.date%}{{post.date}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Time</span></div>
<div style="position:absolute;left:338.10px;top:453.49px" class="cls_008"><span class="cls_008">{%if post.time%}{{post.time}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:471.54px" class="cls_014"><span class="cls_014">Floor(s)</span></div>
<div style="position:absolute;left:96.52px;top:471.51px" class="cls_008"><span class="cls_008">{%if post.floor%}{{post.floor}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:489.55px" class="cls_014"><span class="cls_014">Hazard Level</span></div><div style="position:absolute; left:84px;top:489.51px" class="cls_009"><span class="cls_009">{%if post.hazard_level%}{{post.hazard_level}}{%endif%}</span></div>
<div style="position:absolute;left:259.57px;top:489.45px" class="cls_017"><span class="cls_017">Special Hazard Assessment</span></div>
<div style="position:absolute;left:203.99px;top:491.07px" class="cls_021"><span class="cls_021">Priority</span></div>
<div style="position:absolute;left:236.97px;top:490.27px" class="cls_020"><span class="cls_020">{%if post.priority%}{{post.priority}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:501.55px" class="cls_018"><span class="cls_018">Asbestos</span></div><div class="check_asbestos"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:501.55px" class="cls_018"><span class="cls_018">Confined Space</span></div><div class="check_confined"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:507.58px" class="cls_014"><span class="cls_014">Concern</span></div>
<div style="position:absolute;left:87.54px;top:507.54px" class="cls_009"><span class="cls_009">{%if post.concern%}{{post.concern}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:513.55px" class="cls_018"><span class="cls_018">Fall Protectio</span></div><div class="check_fall"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:513.55px" class="cls_018"><span class="cls_018">LockOut/Tag/Ou</span></div><div class="check_log"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:525.59px" class="cls_014"><span class="cls_014">Element/Code</span></div>
<div style="position:absolute;left:87.54px;top:525.54px" class="cls_009"><span class="cls_009">{%if post.codes%}{{post.codes}}{%endif%}</span></div>
<!--<div style="position:absolute;left:248.82px;top:525.59px" class="cls_014"><span class="cls_014">Code</span></div>
<div style="position:absolute;left:278.80px;top:525.54px" class="cls_015"><span class="cls_015">105 CMR 410.551</span></div>-->
<div style="position:absolute;left:21.70px;top:543.60px" class="cls_014"><span class="cls_014">Corrective</span></div><div style="position:absolute;left:87.54px;top:543.69px" class="cls_016"><span class="cls_016"><textarea rows="2" cols="70" style="height: 26px; border: none; resize: none; outline: none; overflow-y: hidden; color:rgb(185,19,24)" type="textarea">{%if post.correction%}{{post.correction}}{%endif%}</textarea></span></div>
<div style="position:absolute;left:21.70px;top:557.71px" class="cls_014"><span class="cls_014">Action</span></div>
<div style="position:absolute;left:21.70px;top:576.63px" class="cls_014"><span class="cls_014">Repair Dept.</span></div>
<div style="position:absolute;left:239.83px;top:576.63px" class="cls_014"><span class="cls_014">WO Number</span></div>
<div style="position:absolute;left:21.70px;top:594.63px" class="cls_014"><span class="cls_014">WO Complet</span></div>
<div style="position:absolute;left:171.12px;top:594.63px" class="cls_014"><span class="cls_014">Assigned To:</span></div>
<div style="position:absolute;left:329.50px;top:594.63px" class="cls_014"><span class="cls_014">Hrs</span></div>
<!--<div style="position:absolute;left:543.16px;top:756.71px" class="cls_019"><span class="cls_019">Page 1 of 1</span></div>-->
{%if post.image%}<img class="img-size" src="{{ post.image.url }}"/>{% else %}<div class="filler"></div>{% endif %}
{% else %}
<div style="position:relative; left: -2px; margin-bottom: 10px;">
<div style="position:absolute;left:21.79px;top:435.49px" class="cls_0030"><span class="cls_0030">{%if post.department%} {{post.department}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:435.54px" class="cls_014"><span class="cls_014">Inspection #</span></div>
<div style="position:absolute;left:355.58px;top:435.52px" class="cls_013"><span class="cls_013">{{ post.count_building }}</span></div>
<div style="position:absolute;left:21.70px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Date</span></div>
<div style="position:absolute;left:96.52px;top:453.52px" class="cls_013"><span class="cls_013">{%if post.date%}{{post.date}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Time</span></div>
<div style="position:absolute;left:338.10px;top:453.49px" class="cls_008"><span class="cls_008">{%if post.time%}{{post.time}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:471.54px" class="cls_014"><span class="cls_014">Floor(s)</span></div>
<div style="position:absolute;left:96.52px;top:471.51px" class="cls_008"><span class="cls_008">{%if post.floor%}{{post.floor}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:489.55px" class="cls_014"><span class="cls_014">Hazard Level</span></div><div style="position:absolute; left:84px;top:489.51px" class="cls_009"><span class="cls_009">{%if post.hazard_level%}{{post.hazard_level}}{%endif%}</span></div>
<div style="position:absolute;left:259.57px;top:489.45px" class="cls_017"><span class="cls_017">Special Hazard Assessment</span></div>
<div style="position:absolute;left:203.99px;top:491.07px" class="cls_021"><span class="cls_021">Priority</span></div>
<div style="position:absolute;left:236.97px;top:490.27px" class="cls_020"><span class="cls_020">{%if post.priority%}{{post.priority}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:501.55px" class="cls_018"><span class="cls_018">Asbestos</span></div><div class="check_asbestos"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:501.55px" class="cls_018"><span class="cls_018">Confined Space</span></div><div class="check_confined"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:507.58px" class="cls_014"><span class="cls_014">Concern</span></div>
<div style="position:absolute;left:87.54px;top:507.54px" class="cls_009"><span class="cls_009">{%if post.concern%}{{post.concern}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:513.55px" class="cls_018"><span class="cls_018">Fall Protectio</span></div><div class="check_fall"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:513.55px" class="cls_018"><span class="cls_018">LockOut/Tag/Ou</span></div><div class="check_log"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:525.59px" class="cls_014"><span class="cls_014">Element/Code</span></div>
<div style="position:absolute;left:87.54px;top:525.54px" class="cls_009"><span class="cls_009">{%if post.codes%}{{post.codes}}{%endif%}</span></div>
<!--<div style="position:absolute;left:248.82px;top:525.59px" class="cls_014"><span class="cls_014">Code</span></div>
<div style="position:absolute;left:278.80px;top:525.54px" class="cls_015"><span class="cls_015">105 CMR 410.551</span></div>-->
<div style="position:absolute;left:21.70px;top:543.60px" class="cls_014"><span class="cls_014">Corrective</span></div><div style="position:absolute;left:87.54px;top:543.69px" class="cls_016"><span class="cls_016"><textarea rows="2" cols="70" style="height: 27px; border: none; resize: none; outline: none; overflow-y: hidden; color:rgb(185,19,24)" type="textarea">{%if post.correction%}{{post.correction}}{%endif%}</textarea></span></div>
<div style="position:absolute;left:21.70px;top:557.71px" class="cls_014"><span class="cls_014">Action</span></div>
<div style="position:absolute;left:21.70px;top:576.63px" class="cls_014"><span class="cls_014">Repair Dept.</span></div>
<div style="position:absolute;left:239.83px;top:576.63px" class="cls_014"><span class="cls_014">WO Number</span></div>
<div style="position:absolute;left:21.70px;top:594.63px" class="cls_014"><span class="cls_014">WO Complet</span></div>
<div style="position:absolute;left:171.12px;top:594.63px" class="cls_014"><span class="cls_014">Assigned To:</span></div>
<div style="position:absolute;left:329.50px;top:594.63px" class="cls_014"><span class="cls_014">Hrs</span></div>
<!--<div style="position:absolute;left:543.16px;top:756.71px" class="cls_019"><span class="cls_019">Page 1 of 1</span></div>-->
{%if post.image%}<img class="img-size" src="{{ post.image.url }}"/>{% else %}<div class="filler"></div>{% endif %}
{% endif %}
<br>
<br>
<br>
<br>
<br>
<br>
</div>
{% endfor %}
您可以使用 Django 已经提供的一些模板：
{{ forloop.counter }} 索引从 1 开始。{{ forloop.counter0 }} 索引从 0 开始。
您可以使用 divisibleby 模板过滤器
与 forloop.counter 一起检测每三个循环
{% for post in filter.qs %}
{% if forloop.counter|divisibleby:"3" %}
Something every third loop
{% endif %}
{% endfor
我有一个网站，在一个页面上有来自要打印的 for 循环的重复信息。问题是 forloop 中的每一项都是大约 10 行文本。当我去打印时，10 行文本有时会在页面之间中断。无论如何我都需要他们呆在一起，我试过“page-break-inside: avoid;”但我无法让它工作。然而，这有点无关紧要，因为我需要确保每个页面上只有三个块，因为 4 个已经超出了页边距。我的计划是很好地循环块并检测每三个循环并在其下方添加额外的间距以使其转到下一页。
问题：如何检测我的 html forloop 中的每三个循环？
{% for post in filter.qs %}
{% if forloop.first %}
<div style="position:relative; top: -12px; left: -2px; margin-bottom: 180px;">
<div style="position:absolute;left:21.79px;top:435.49px" class="cls_0030"><span class="cls_0030">{%if post.department%} {{post.department}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:435.54px" class="cls_014"><span class="cls_014">Inspection #</span></div>
<div style="position:absolute;left:355.58px;top:435.52px" class="cls_013"><span class="cls_013">{{ post.count_building }}</span></div>
<div style="position:absolute;left:21.70px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Date</span></div>
<div style="position:absolute;left:96.52px;top:453.52px" class="cls_013"><span class="cls_013">{%if post.date%}{{post.date}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Time</span></div>
<div style="position:absolute;left:338.10px;top:453.49px" class="cls_008"><span class="cls_008">{%if post.time%}{{post.time}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:471.54px" class="cls_014"><span class="cls_014">Floor(s)</span></div>
<div style="position:absolute;left:96.52px;top:471.51px" class="cls_008"><span class="cls_008">{%if post.floor%}{{post.floor}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:489.55px" class="cls_014"><span class="cls_014">Hazard Level</span></div><div style="position:absolute; left:84px;top:489.51px" class="cls_009"><span class="cls_009">{%if post.hazard_level%}{{post.hazard_level}}{%endif%}</span></div>
<div style="position:absolute;left:259.57px;top:489.45px" class="cls_017"><span class="cls_017">Special Hazard Assessment</span></div>
<div style="position:absolute;left:203.99px;top:491.07px" class="cls_021"><span class="cls_021">Priority</span></div>
<div style="position:absolute;left:236.97px;top:490.27px" class="cls_020"><span class="cls_020">{%if post.priority%}{{post.priority}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:501.55px" class="cls_018"><span class="cls_018">Asbestos</span></div><div class="check_asbestos"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:501.55px" class="cls_018"><span class="cls_018">Confined Space</span></div><div class="check_confined"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:507.58px" class="cls_014"><span class="cls_014">Concern</span></div>
<div style="position:absolute;left:87.54px;top:507.54px" class="cls_009"><span class="cls_009">{%if post.concern%}{{post.concern}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:513.55px" class="cls_018"><span class="cls_018">Fall Protectio</span></div><div class="check_fall"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:513.55px" class="cls_018"><span class="cls_018">LockOut/Tag/Ou</span></div><div class="check_log"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:525.59px" class="cls_014"><span class="cls_014">Element/Code</span></div>
<div style="position:absolute;left:87.54px;top:525.54px" class="cls_009"><span class="cls_009">{%if post.codes%}{{post.codes}}{%endif%}</span></div>
<!--<div style="position:absolute;left:248.82px;top:525.59px" class="cls_014"><span class="cls_014">Code</span></div>
<div style="position:absolute;left:278.80px;top:525.54px" class="cls_015"><span class="cls_015">105 CMR 410.551</span></div>-->
<div style="position:absolute;left:21.70px;top:543.60px" class="cls_014"><span class="cls_014">Corrective</span></div><div style="position:absolute;left:87.54px;top:543.69px" class="cls_016"><span class="cls_016"><textarea rows="2" cols="70" style="height: 26px; border: none; resize: none; outline: none; overflow-y: hidden; color:rgb(185,19,24)" type="textarea">{%if post.correction%}{{post.correction}}{%endif%}</textarea></span></div>
<div style="position:absolute;left:21.70px;top:557.71px" class="cls_014"><span class="cls_014">Action</span></div>
<div style="position:absolute;left:21.70px;top:576.63px" class="cls_014"><span class="cls_014">Repair Dept.</span></div>
<div style="position:absolute;left:239.83px;top:576.63px" class="cls_014"><span class="cls_014">WO Number</span></div>
<div style="position:absolute;left:21.70px;top:594.63px" class="cls_014"><span class="cls_014">WO Complet</span></div>
<div style="position:absolute;left:171.12px;top:594.63px" class="cls_014"><span class="cls_014">Assigned To:</span></div>
<div style="position:absolute;left:329.50px;top:594.63px" class="cls_014"><span class="cls_014">Hrs</span></div>
<!--<div style="position:absolute;left:543.16px;top:756.71px" class="cls_019"><span class="cls_019">Page 1 of 1</span></div>-->
{%if post.image%}<img class="img-size" src="{{ post.image.url }}"/>{% else %}<div class="filler"></div>{% endif %}
{% else %}
<div style="position:relative; left: -2px; margin-bottom: 10px;">
<div style="position:absolute;left:21.79px;top:435.49px" class="cls_0030"><span class="cls_0030">{%if post.department%} {{post.department}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:435.54px" class="cls_014"><span class="cls_014">Inspection #</span></div>
<div style="position:absolute;left:355.58px;top:435.52px" class="cls_013"><span class="cls_013">{{ post.count_building }}</span></div>
<div style="position:absolute;left:21.70px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Date</span></div>
<div style="position:absolute;left:96.52px;top:453.52px" class="cls_013"><span class="cls_013">{%if post.date%}{{post.date}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:453.54px" class="cls_014"><span class="cls_014">Inspection Time</span></div>
<div style="position:absolute;left:338.10px;top:453.49px" class="cls_008"><span class="cls_008">{%if post.time%}{{post.time}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:471.54px" class="cls_014"><span class="cls_014">Floor(s)</span></div>
<div style="position:absolute;left:96.52px;top:471.51px" class="cls_008"><span class="cls_008">{%if post.floor%}{{post.floor}}{%endif%}</span></div>
<div style="position:absolute;left:21.70px;top:489.55px" class="cls_014"><span class="cls_014">Hazard Level</span></div><div style="position:absolute; left:84px;top:489.51px" class="cls_009"><span class="cls_009">{%if post.hazard_level%}{{post.hazard_level}}{%endif%}</span></div>
<div style="position:absolute;left:259.57px;top:489.45px" class="cls_017"><span class="cls_017">Special Hazard Assessment</span></div>
<div style="position:absolute;left:203.99px;top:491.07px" class="cls_021"><span class="cls_021">Priority</span></div>
<div style="position:absolute;left:236.97px;top:490.27px" class="cls_020"><span class="cls_020">{%if post.priority%}{{post.priority}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:501.55px" class="cls_018"><span class="cls_018">Asbestos</span></div><div class="check_asbestos"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:501.55px" class="cls_018"><span class="cls_018">Confined Space</span></div><div class="check_confined"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:507.58px" class="cls_014"><span class="cls_014">Concern</span></div>
<div style="position:absolute;left:87.54px;top:507.54px" class="cls_009"><span class="cls_009">{%if post.concern%}{{post.concern}}{%endif%}</span></div>
<div style="position:absolute;left:248.82px;top:513.55px" class="cls_018"><span class="cls_018">Fall Protectio</span></div><div class="check_fall"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:321.57px;top:513.55px" class="cls_018"><span class="cls_018">LockOut/Tag/Ou</span></div><div class="check_log"><div class="text_pos">Y</div></div>
<div style="position:absolute;left:21.70px;top:525.59px" class="cls_014"><span class="cls_014">Element/Code</span></div>
<div style="position:absolute;left:87.54px;top:525.54px" class="cls_009"><span class="cls_009">{%if post.codes%}{{post.codes}}{%endif%}</span></div>
<!--<div style="position:absolute;left:248.82px;top:525.59px" class="cls_014"><span class="cls_014">Code</span></div>
<div style="position:absolute;left:278.80px;top:525.54px" class="cls_015"><span class="cls_015">105 CMR 410.551</span></div>-->
<div style="position:absolute;left:21.70px;top:543.60px" class="cls_014"><span class="cls_014">Corrective</span></div><div style="position:absolute;left:87.54px;top:543.69px" class="cls_016"><span class="cls_016"><textarea rows="2" cols="70" style="height: 27px; border: none; resize: none; outline: none; overflow-y: hidden; color:rgb(185,19,24)" type="textarea">{%if post.correction%}{{post.correction}}{%endif%}</textarea></span></div>
<div style="position:absolute;left:21.70px;top:557.71px" class="cls_014"><span class="cls_014">Action</span></div>
<div style="position:absolute;left:21.70px;top:576.63px" class="cls_014"><span class="cls_014">Repair Dept.</span></div>
<div style="position:absolute;left:239.83px;top:576.63px" class="cls_014"><span class="cls_014">WO Number</span></div>
<div style="position:absolute;left:21.70px;top:594.63px" class="cls_014"><span class="cls_014">WO Complet</span></div>
<div style="position:absolute;left:171.12px;top:594.63px" class="cls_014"><span class="cls_014">Assigned To:</span></div>
<div style="position:absolute;left:329.50px;top:594.63px" class="cls_014"><span class="cls_014">Hrs</span></div>
<!--<div style="position:absolute;left:543.16px;top:756.71px" class="cls_019"><span class="cls_019">Page 1 of 1</span></div>-->
{%if post.image%}<img class="img-size" src="{{ post.image.url }}"/>{% else %}<div class="filler"></div>{% endif %}
{% endif %}
<br>
<br>
<br>
<br>
<br>
<br>
</div>
{% endfor %}
您可以使用 Django 已经提供的一些模板：
{{ forloop.counter }}索引从 1 开始。{{ forloop.counter0 }}索引从 0 开始。
您可以使用 divisibleby 模板过滤器
与 forloop.counter 一起检测每三个循环
{% for post in filter.qs %}
{% if forloop.counter|divisibleby:"3" %}
Something every third loop
{% endif %}
{% endfor