Forum

Thread tagged as: Question, Problem

Perch every loop

Hi,

Just not quite getting my head around why this is not working, but I have a template that I wish to generate a formatted list of results. The code in the template is:

<perch:before>
</perch:before>
<perch:if id="articleSection" value="A">
  <perch:if exists="perch_item_first">
    <div class="row first">
  </perch:if>
  <perch:every count="3"><div class="row"></perch:every>
    <div class="col-md-6">
      <!-- Perch tags to return data -->
    </div>
    <perch:every count="2"></div></perch:every>
  </perch:if>
<perch:after>
</perch:after>

Now, the html I am expecting is:

<div class="row first">
    <div class="col-md-6">
    <!-- Content -->
    </div>
    <div class="col-md-6">
    <!-- Content -->
    </div>
</div>
<!-- New row 1-->
<div class="row">
    <div class="col-md-6">
    <!-- Content -->
    </div>
    <div class="col-md-6">
    <!-- Content -->
    </div>
</div>
<!-- New row 2 -->
<div class="row">
        <div class="col-md-6">
    <!-- Content -->
    </div>
    <div class="col-md-6">
    <!-- Content -->
    </div>
</div>

but what I end up with is:

<div class="row first">
    <div class="col-md-6">
    <!-- Content -->
    </div>
    <div class="col-md-6">
    <!-- Content -->
    </div>
</div>
<!-- New row 1 -->
<div class="row">
    <div class="col-md-6">
    <!-- Content -->
    </div>
    <div class="col-md-6">
    <!-- Content -->
    </div>
</div>
<div class="col-md-6">
    <!-- Content -->
    </div>
</div>
<!-- New row 2 -->
<div class="row">
    <div class="col-md-6">
    <!-- Content -->
    </div>
</div>

For the same 6 entries. I can sort of understand what is happening, but my thought is that on initial run through of the loop, the counter gets to 2 and adds the final </div> to finish the row, at which point the counter is then at three for the initial 'new row' and adds in a new <div class="row"> element.

This seems to be true as then the second row is added and when the counter gets to 2 the final </div> is added, so why on the second run through, is the counter not at 3 again to add in the <div class="row"> element again, rather than looping once more and adding in <div class="col-md-6"> before finally breaking out of the loop ?

I hope you can see and understand the above from my illustration.

Thanks,

Andy
Andrew Kennedy

Andrew Kennedy 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Give this a try, works for me here.

<perch:every nth-child="2n+1">
<div class="row<perch:if exists="perch_item_first"> first</perch:if>">
</perch:every>
    <div class="col-md-6">
        <!-- Content -->
    </div>
<perch:every nth-child="2n+2">
<perch:if exists="perch_item_last"><perch:else /></div></perch:if>
</perch:every>
<perch:after>
</div>
</perch:after>
Andrew Kennedy

Andrew Kennedy 0 points

7 years ago

Thanks Drew, I had started to go down this sort of route, but couldn't get it to work.

This is perfect, so thank you very much indeed.
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

No problem - quite a fun one to solve!
Andrew Kennedy

Andrew Kennedy 0 points

7 years ago

Thanks Drew, given me a much better understanding of things and has allowed me to replicate the same type of solution for a 3column output etc etc.

Cheers