Can't find how to split content in different layers

[Tomás Corral Casas]

Hi! 

This is my first time I need some help using Jade, and I think that this group could be really helpful to me.

I've a problem trying to reproduce my HTML markup using Jade.

I receive an array with 96 images and I want to split these images in 12 images per layer. (but I could receive less than 96)

The code below is a pseudocode example to explain what I want.

<ul>

for(var i = 0; i < results.length; i++)

{

  if(i === 0 || i % 12 === 0)

  {

    <li>

    <div>

  }

  <div class="item>

    <a>

      <img/>

    </a>

  </div>

  if(i === 0 || i % 12 === 0)

  {

      </div>

    </li>

  }

}

</ul>

I've tried to solve this problem in Jade using different indentations and my best solution has been to loop two times.

The first loop to know how many containers I will need and the second one to draw my containers and images inside.

Is there a 'good way' to solve this issue?

Here you have the code of one of my tries (using this code I get one container per image):

each item, index in results

  if index === 0 || index%12 === 0

    |<li>

    | <div>

  |<div>

  | <a href="#{item.img_url}:large" title="#{item.user}">

  |   <img src="#{item.img_url}:thumb" alt="#{item.user}"/>

  | </a>

  |</div>

  if index === 0 || index%12 === 0

    | </div>

    |</li>

Thanks for your time, and please let me know if you can help me.

[Nami Doc]

I'm afraid that's the better option you have. That or do 2 loops.

[greelgorke]

try this, i haven't tested it yet:

each item, index in results

  - var layerSize = 12;

-// if it's the first element of a layer, open layer

  if index % layerSize === 0

    |<li>

    | <div>

 -// do your item stuff

  |<div>

  | <a href="#{item.img_url}:large" title="#{item.user}">

  |   <img src="#{item.img_url}:thumb" alt="#{item.user}"/>

  | </a>

  |</div>

-// check if you have to close the open container

-// close if layer is full and its not the first item (note: 0 % 12 === 0)

-// or if layer isn't full but we reached the end of images

  if (index%layerSize === 0 && index !== 0) || index === results.length -1

    |</li>