Как правильно вычислить последовательность для вывода?

Всем привет

как вывести вот в такой структуре,

<div>
   <div class="double items">
      <div>1</div>
      <div>2</div>
   </div>
   <div>3</div>
<div>
<div>
   <div class="double items">
      <div>4</div>
      <div>5</div>
   </div>
   <div>6</div>
<div>
<div>
   <div class="double items">
      <div>7</div>
      <div>8</div>
   </div>
   <div>9</div>
<div>

$idx начинается с 1

{if $idx == 1 ||  $idx % 4 == 1}
    <div class="ascents-section">
{/if}
    {if $idx % 3 != 1}
         <div class="ascents-section__item ascents-double">
    {/if}
        <div class="ascents-double__item" title="{$id | resource: 'pagetitle'}">
              <div class="ascents-section__item-photo" id="photo-effect">
                <picture>
                  <source media="(min-width: 1440px)" srcset="{$id | resource:'image'}">
                  <img class="effectImg" src="{$id | resource:'image'}" alt="{$id | resource: 'pagetitle'}">
                </picture>
              </div>
              <div class="ascents-section__item-info">
                <h2 class="for-heading">{$id | resource: 'pagetitle'}</h2>
                <p class="subtitle">Легкий</p>
                <a href="{$_modx->makeUrl($id)}" title="{$id | resource: 'pagetitle'}" class="button button-program">Перейти</a>
              </div>
            </div>
    {if $idx % 3 == 1}
        </div>
    {/if}
    {if $idx % 3 == 1}
        <div class="ascents-section__item" title="{$id | resource: 'pagetitle'}">
            <div class="ascents-section__item-photo" id="photo-effect">
              <picture>
                <source media="(min-width: 1440px)" srcset="{$id | resource:'image'}">
                <img class="effectImg" src="{$id | resource:'image'}" alt="{$id | resource: 'pagetitle'}">
              </picture>
            </div>
            <div class="ascents-section__item-info">
              <h2 class="for-heading">{$id | resource: 'pagetitle'}</h2>
              <p class="subtitle">Тяжелый</p>
              <a href="{$_modx->makeUrl($id)}" title="{$id | resource: 'pagetitle'}" class="button button-program">Перейти</a>
            </div>
        </div>
    {/if}
{if $idx % 3 == 1}
    </div>
{/if}

Максим

09 сентября 2021, 16:33

654

Комментарии: 4

Роман

09 сентября 2021, 17:24

Если у тебя в структуре по 3 элемента, значит дели на 3, и вычисляй по остатку

{if $idx % 3 == 1}<div><div class="double items">{/if}
<div>{$idx}</div>
{if $idx > 1 && ($idx % 3 == 2 || $idx % 3 == 0)}</div>{/if}

Роман

09 сентября 2021, 17:27

Только может быть проблема, когда idx будет не по порядку, а так же если их будет не кратное трем (последний див не закроется).

Максим

09 сентября 2021, 17:35

а как можно еще по другому сделать, я что-то не приложу ума

Andrey

09 сентября 2021, 18:02

Вёрсткой, :nth-child(), например.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.