Forum

Thread tagged as: Question, Problem

Issues With perch:every nth-child

I have this code Drew kindly helped with:

<perch:every nth-child="3n+1"><div class="row"></perch:every>
<div class="one_third<perch:every count="3"> last</perch:every>">
<div class="cont-area">
</div>
</div>
<perch:every nth-child="3n"></div></perch:every>

The template outputs a row wrapped around every 3 items added. Problem is if there are not 3 items in a row the last statement above does not get triggered so it misses a closing </div> tag. How can I adapt this to add this?

I can see why it does not.
Nigel Coath

Nigel Coath 1 points

  • 7 years ago
Nigel Coath

Nigel Coath 1 points

7 years ago

Not sure if this helps anyone else, but I found a solution using javascript that seems to generate the html.

I added this to the page template:

<script type="text/javascript">
var $children = $('.one_third');
for(var i = 0, l = $children.length; i < l; i += 3) {
    $children.slice(i, i+3).wrapAll('<div class="row"></div>');
}
</script>

and stripped the above to:

<div class="one_third<perch:every count="3"> last</perch:every>">
<div class="cont-area">
</div>
</div>

Seems to work.
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

So you're all sorted now?