【问题标题】:django template rows of multiple items多个项目的django模板行
【发布时间】:2017-02-02 22:02:43
【问题描述】:

我正在创建一个目录,其中有一个未定义长度的项目列表。我想把它吐出来,每行有三列。所以我有以下html:

<div class="row">
    <div class="three columns">item 1
    </div>
    <div class="three columns">item 2
    </div>
    <div class="three columns">item 3
    </div>
</div>
<div class="row">
    <div class="three columns">item 4
    </div>
    <div class="three columns">item 5
    </div>
    <div class="three columns">item 6
    </div>
</div>

我不知道如何将它实现为 django 模板?如何拆分它以便在三个项目之后开始新行?

【问题讨论】:

    标签: django django-templates


    【解决方案1】:

    抱歉没有足够的声誉来评论 jpic 的答案(已接受的答案),对于 Jinja2,请使用:

    <div class="row">
    {% for item in items %}
        <div class="three columns">{{ item }}
        </div>
        {% if loop.index is divisibleby(3) %}
    </div>
    <div class="row">
        {% endif %}
    {% endfor %}
    </div>
    

    详情为here

    【讨论】:

      【解决方案2】:

      您可以尝试创建一个自定义模板过滤器,该过滤器将返回 3 项列表

      快速尝试:

      @register.filter
      def splitByThree(data):
          return [l[i:i+3] for i in range(0, len(l), 3)]
      

      然后在你的模板中:

      {% load splitByThree %}
      
      {% for list in data|splitByThree %}
      <div class="row">
      {% for item in list %}
      <div class="three columns">{{ item }}</div>
      {% endfor %}
      </div>
      {% endfor %}
      

      【讨论】:

      【解决方案3】:

      您可以使用forloop.counter 变量和divisibleby 过滤器。代码将接近此:

      {% for item in items %}
          {% if forloop.first %}
              <div class="row">
          {% endif %}
          <div class="three columns">{{ item }}</div>
          {% if forloop.counter|divisibleby:"3" %}
              </div>
              {% if not forloop.last %}
                  <div class="row">
              {% endif %}
          {% endif %}
          {% if forloop.last %}
               </div>
          {% endif %}
      {% endfor %}
      

      【讨论】:

        【解决方案4】:

        试试这样的:

        <div class="row">
        {% for item in items %}
            <div class="three columns">{{ item }}
            </div>
            {% if forloop.counter|divisibleby:3 %}
        </div>
        <div class="row">
            {% endif %}
        {% endfor %}
        </div>
        

        【讨论】:

        • 哎呀,同样的答案我来不及了
        • 太棒了——太棒了。我不知道 divisibleby 选项 - 我会更多地查看文档。
        • 如果您碰巧有一排少于三个项目,这不会中断吗?该行不会满足divisibleby:3,并且您将错过结束&lt;/div&gt;。我认为创建子列表的解决方案更稳定。
        • 你拯救了我的一天:*
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-01-21
        • 1970-01-01
        • 2012-08-25
        • 1970-01-01
        相关资源
        最近更新 更多