I’m trying to add a condition to a loop. What I need to do is loop through a Post Type which I am currently doing ok, I would like to get the current loop iteration number so I can set a CSS class against.
I would like to set if row number is odd set the background colour to something else.
You can even simplify this further with the keywords “odd” and “even”, but understanding the first example will make these selectors useful to you in many more circumstances
For this example I will be using the nth-child Julia thank you, but also as Phil said I believe this should be added and supported natively supported by the loop tag as there are so many different case uses for a loop number. I will take a look at the Math workaround as well.
As a few others have mentioned in this thread, the functionality you’re describing is already natively supported in L&L by using the loop count variable in conjunction with the Math tag if you want to use a different template on alternating loop items. That would look something like this:
<If check="{Math}{Get loop=count} % 2 {/Math}" is value=0>
This item is even. <Template id=123 />
<Else />
This item is odd. <Template id=456 />
</If>
If you’re not already familiar with it, you’ll want to look up how the modulus operator % works.
While this is possible, it’s not the most efficient approach if you just want to style alternating items in the loop since with this approach you’re running some conditional logic and a mathematical calculation and getting a variable for every single item in the loop. That markup isn’t particularly taxing on the server, but it’s overkill if all you need to do is swap out a background color. If you need to render completely different data on alternating loop items then this would be a good approach, but for just styling stuff, it would be better to use CSS :nth-child selectors as Julia noted. Even if you did need to display different data on alternating items, it might still be more efficient to achieve this by hiding some pieces of data using CSS, but this would depend on the use case and would require some testing (probably with the Timer tag) to figure out which is the most efficient. So in your case, what I noted above wouldn’t be the right approach, but I thought I’d add it to this discussion anyway to show how this feature could be used.
