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

Posted 2023-02-24

【中文标题】如何在 django 模板中获取 for 循环内的列表的下一个元素？

【英文标题】：how to get to the next element of list inside for loop in django template?

【发布时间】：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 模板中做到这一点

【参考方案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 "  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"  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"  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"  class="img-fluid">                    
        <div class="photo-text-more">
           <span class="icon icon-camera"></span>
        </div>
      </a>
   </div>

</div>

【讨论】：

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