php - 범위 - css nth-of-type



나뭇 가지, 첫 번째와 마지막 클래스 추가 (3)

나는 이것을 Drupal 8보기 템플릿에서 사용합니다. 'elseif'를 주셔서 감사합니다. 단 하나의 항목 만있는 경우 첫 번째 항목은 절대로 '마지막'클래스를 갖지 않습니다.

{% for row in rows %}
    {% set parity = cycle(['odd', 'even'], loop.index0) %}
    {% set row_classes = [ default_row_class ? 'views-row', ] %}    

    <div class="views-prerow {{parity}}{% if loop.first %} first{% elseif loop.last %} last{% endif %}">
        <div{{ row.attributes.addClass(row_classes) }}>
            {{ row.content }}
        </div>
    </div>
{% endfor %}

https://ffff65535.com

이렇게 for 루프가 있다고 가정 해 봅시다.

{% for elem in arrMenu %}
    <div class="topmenu-button">
        <a href="{{ elem.url }}">{{ elem.name }}</a>
    </div>
{% endfor %}

이 형식에서는 다음과 같이 렌더링됩니다.

<div class="topmenu-button"><a href="url">name</a></div>
<div class="topmenu-button"><a href="url">name</a></div>
<div class="topmenu-button"><a href="url">name</a></div>
<div class="topmenu-button"><a href="url">name</a></div>

나뭇 가지를 사용하면 첫 번째 및 마지막 클래스를 div에 추가 할 수 있으므로 다음과 같은 결과를 얻을 수 있습니다.

<div class="topmenu-button first"><a href="url">name</a></div>
<div class="topmenu-button"><a href="url">name</a></div>
<div class="topmenu-button"><a href="url">name</a></div>
<div class="topmenu-button last"><a href="url">name</a></div>

루프는 first 부터 last 동시에 사용할 수 없기 때문에 elseif 를 사용하지 말고 (DRY - 장래에 topmenu-button 을 변경해야하는 경우 어떻게합니까?) :

{% for elem in arrMenu %}
    {% set append %}
        {% if loop.first %}first{% endif %}
        {% if loop.last %}last{% endif %}
    {% endset %}
    <div class="topmenu-button {{ append }}">
        <a href="{{ elem.url }}">{{ elem.name }}</a>
    </div>
{% endfor %}

또는보다 간결하게 :

{% for elem in arrMenu %}
    <div class="topmenu-button {% if loop.first %}first{% endif %} {% if loop.last %}last{% endif %}">
        <a href="{{ elem.url }}">{{ elem.name }}</a>
    </div>
{% endfor %}

편집 :이 방법은 class 속성 (그것은 완벽하게 괜찮아요 btw)에서 몇 가지 여분의 공간을 얻을거야. Edit2 : 이것은 1 요소 배열 (first = last)을 처리하지 않습니다.


태그의 클래스 특성을 관리하는 것이면 삼항 조건이 더 좋을 것입니다.

<span class="topmenu-button {{ (loop.first) ? 'first' : '' }}">{{ item.text }}</span>




twig