如何在 django 模板中获取 for 循环内的列表的下一个元素？答案

【问题标题】：how to get to the next element of list inside for loop in django template?如何在 django 模板中获取 for 循环内的列表的下一个元素？
【发布时间】：2020-10-23 06:01:08
【问题描述】：

我有一个类似的列表

lst = [
       ['img1','img2','img3','img4','img5'], 
       ['img6','img7','img8','img9']
      ]

还有一个类似的模板

<div class="row">                               -- 1st row
   <div class="col-lg-3" data-aos="fade-up">    --col-lg-3
      <a href="{{img1}}">  --img1
        <img src="{{img1}}">                    -- img1
      </a>
   </div>

   <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">    --col-lg-6
       <a href="{{img2}}">   --img2
          <img src="{{img2}}">                    --img2
       </a>
   </div>
   <div class="col-lg-3" data-aos="fade-up" data-aos-delay="200">    --col-lg-3
        <a href="{{img}}">   --img3
           <img src="{{img}}">                    --img3
       </a>
   </div>
</div>

<div class="row">                                 ---2nd row

   <div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">    --col-lg-8
       <a href="{{img2}}">   --img2
          <img src="{{img2}}">                    --img2
       </a>
   </div>
   <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">    --col-lg-4
        <a href="{{img}}">   --img3
           <img src="{{img}}">                    --img3
       </a>
   </div>
</div>

请注意几点：

每个 col-lg 大小都有不同的大小
一列的每个and标签包含1个img

我想以不同的方式迭代整个模板

例如：我可以在 python 中执行此操作，我可以迭代列表并分配值

for data in lst:
  it = iter(data)

  print (next(it))    ---where print will be replaced with img tag 
  print (next(it))  
  print (next(it))
  print (next(it))
  print (next(it))

但是我如何在 django 模板中做到这一点

【问题讨论】：

标签： python-3.x django list django-templates

【解决方案1】：

Django 的for-in template 循环为数据中的每个项目构建模板标记循环之间定义的DOM。

话虽如此，您可以像这样调整您的解决方案：

<div class="row align-items-stretch">
                     
{% for img in data %}
                     
   <div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
      <a href="{{ data.img }}" class="d-block photo-item" data-fancybox="gallery">  
        <img src="{{ data.img.url }}" alt="Image" class="img-fluid">                    
        <div class="photo-text-more">
           <span class="icon icon-camera"></span>
        </div>
      </a>
   </div>
                     
{% endfor %}

</div>

如果data 包含三个项目/图像，输出将类似于：

<div class="row align-items-stretch">
                     
   # 1st iteration   
               
   <div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
      <a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">  
        <img src="link" alt="Image" class="img-fluid">                    
        <div class="photo-text-more">
           <span class="icon icon-camera"></span>
        </div>
      </a>
   </div>


   # 2nd iteration

   <div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
      <a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">  
        <img src="link" alt="Image" class="img-fluid">                    
        <div class="photo-text-more">
           <span class="icon icon-camera"></span>
        </div>
      </a>
   </div>


   # 3rd iteration

   <div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
      <a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">  
        <img src="link" alt="Image" class="img-fluid">                    
        <div class="photo-text-more">
           <span class="icon icon-camera"></span>
        </div>
      </a>
   </div>

</div>

【讨论】：

谢谢。但这不是我想要的。我想我没有很好地解释它。我会再试一次。