Channel entries Swith (looping) different DOM div blocks order?

Question

I need display entries of a channel, is easy when you have the same structure of your DOM elements like:

{exp:channel:entries 
   channel="{channel}"
   limit="6"
}

   <div class="{switch='row1|row2'}">
      <div class="john guitar">
         JOHN
      </div>
      <div class="jagger drums">
         JAGGER
      </div>
   </div>

{/exp:channel:entries}

so that is simple with https://ellislab.com/expressionengine/user-guide/add-ons/channel/channel_entries.html#switch, render the same structure 6 times jump between row1 and row2 BUT!!! my structure have 6 different block of code AND!!! in each block add new clases AND!! some pieces of code are in the top and later at the bottom, like this:

<div class="row1">
   <div class="john guitar">
      JOHN
   </div>
   <div class="jagger drums">
      JAGGER
   </div>
</div>

<div class="row2">
   <div class="jagger voice">
      JAGGER
   </div>
   <div class="john bass">
      JOHN
   </div>
</div>

etc...

you see, John is in the top, but in the second block is in the bottom and also add a new class to the div, later Jagger is in the bottom but in the second is in the top... and so on...

please see the the real code!!! html that I need looping through, is very clear what I need: http://cl.ly/code/3t3O0P3k3j0H (6 different blocks with new classes in)

I dont get it how can looping if the positions are different.

any help? thank you!!

Answer 1

Hard to discern a pattern in your markup but have a look at the modulus operator https://ellislab.com/expressionengine/user-guide/templates/conditionals.html#modulus-operator which can be handy if you need to do something every nth iteration of a loop.

Why do you need the top-x2 and top-x1 classes?

Answer 2

You can always have multiple {switch tags}

<div class="row {switch='first|second'}">

  <div class="{switch='left|right'>Something</div>
  <div class="{switch='right|left'>Something else</div>

</div>

Or if you can work it out in your head something like this:

<div class="row {switch='first|second'}">

  <div class="{switch='left1|right1|left2|right2'>Something</div>
  <div class="{switch='right1|left1|right2|left2'>Something else</div>

</div>