如果循环中的第一项，Nunjucks 将类添加到元素答案

【问题标题】：Nunjucks add class to element if first item in loop如果循环中的第一项，Nunjucks 将类添加到元素
【发布时间】：2019-01-29 22:55:50
【问题描述】：

我正在对存储在 yaml 文件中的一组内容执行循环，该文件概述了我的页面目录。对于循环中的第一项，我想在类中添加一个“is-active”修饰符。所有其他项目不应收到此项目。 'is-active' 类将导致我的手风琴打开/展开而不是关闭。

由于某种原因，我使用的语法不起作用。感谢您对我的任何帮助。

模板.html

<!-- language: lang-html -->
<div class="grid-container leader-1">
  <div class="column-6 tablet-column-12">
    <aside class="js-accordion accordion tablet-hide" aria-role="complementary">
      {% for group in data.table_of_contents[section].navigation %}
      {% if group.hidden != true %}
      {% if loop.first == true %}
      <div class="accordion-section is-active">
      {% else %}
      <div class="accordion-section">
      {% endif %}
        <h4 class="accordion-title">
          <span class="accordion-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/>
            </svg>
          </span>
          {{ group.group }}
        </h4>
        <!-- accordion-menu -->
        <div class="accordion-content">
          {% for page in group.pages %}
          {% if page.title == 'Overview' %}
          <a href="#{{group.group | replace(" ", "-") | lower}}" class="side-nav-link">{{page.title}}</a>
          {% else %}
          <a href="#{{page.link}}" class="side-nav-link">{{page.title}}</a>
          {% endif %}
          {% endfor %}
        </div>
      {% endif %}
      {% endfor %}
      </div>
    </aside>
  </div>
</div>

由于某种原因，我的 'is-active' 修饰符被添加到所有 'accordion-section' div 中。我只希望将它添加到它创建的第一个“手风琴部分”div，以便第一个手风琴部分展开，而其下方的其余部分则关闭。

table-of-contents.yml

get-started:
title: 'Get Started'
base: 'get-started'
navigation:
  - group: 'Get Started'
    pages:
      - title: 'Overview'
        link: get-started
      - title: 'Static Files'
        link: static-files
      - title: 'Ruby Gem'
        link: ruby-gem
      - title: 'Whats New'
        link: whats-new
javascript:
title: 'JavaScript'
base: javascript
navigation:
  - group: 'Interactive Patterns'
    pages:
      - title: 'Overview'
        link: overview
      - title: 'Import calcite-web.js'
        link: importing
      - title: 'Event Bus'
        link: event-bus
  - group: 'Utility Functions'
    pages:
      - title: 'Overview'
        link: utility-functions
      - title: 'DOM Utilities'
        link: dom-utilities

目录持续了很长一段时间，但这是结构的代表性示例。

【问题讨论】：

loop.index == 1?
试过了。一样。每个手风琴部分都获得 is-active 类，而不仅仅是第一个。

标签： html yaml jinja2 templating nunjucks

【解决方案1】：

您不能使用双等号进行此比较。尝试简单地检查布尔值而不进行比较：

{% if loop.first %}
  <div class="accordion-section is-active">
{% else %}
  <div class="accordion-section">
{% endif %}

【讨论】：

<div class="accordion-section {{ 'is-active' if loop.first }}"> 短一点:)
保罗的回答是正确的，他是第一个。虽然我最终确实像 Aikon 建议的那样内联。我缺少的另一件事是我需要在手风琴部分之外结束 for 循环。
@AikonMogwai 哦，不错，非常漂亮。