If statement inside a foreach loop

[dalevi]

Hi,
I've created a template that we use to get the top three page objects having tag = events.
This workes just fine.

<h1>Template:EventLinks</h1>
<p style="padding: 20px 0pt 0pt 10px;">UPCOMING EVENTS:</p>
<div init="var x = 0; var ix = wiki.getsearch{query: 'tag:Event', max: 3, sortby: 'date'}">
<div foreach="var p in ix">
<p class="eventlink">{{web.link(p.uri, p.title)}}</p>
</div>
</div>

My problem:
I want the first returned record in the foreach loop to get another style by using a different class name for that record.
I've been trying the "if else" statement with a variable that increments 1 step for each record, but this does not seem to work inside the foreach loop.

Does anyone have an idea on what to do?

[SteveB]

There are two implicit variables you can use: __count and __index. __count is incremented for each successful iteration (when using the optional 'where' clause to skip certain iterations), while __index is increased for each iteration regardless if it's skipped or not. If no 'where' clause is used, then __count and __index are the same.

Here is a quick sample to see how the two behave:

<ul>
    <li foreach="var i in num.series(1, 10)" where="i % 2">
        __count: {{__count}}, __index: {{__index}}
    </li>
</ul>

[dalevi]

Thanks Steve!
That did the trick for the if statement.
However, i can't seem to get the class identification to work.
We have created our own deki skinn based on the fiesta skinn and in styles.css we have added some skinning variables for our needs. Whithout the if statement we can target a specific variable in styles.css without problems but within the if statement this does not seem to work.

New code:

<div foreach="var p in ix"> {{ if(__index == 0){
<p class="eventlinkfirst">web.link(p.uri, p.title)<p>
} else{
<p class="eventlink">web.link(p.uri, p.title)<p>
}}}</div>

instead of p.title above I used __index just to make sure that it worked as intended and this workes just fine. The class="..." just wont work.

Any ideas?

[dalevi]

Solved it after some testing.

<div init="var ix = wiki.getsearch{query: 'tag:Event', max: 3, sortby: 'date'}">
<div foreach="var p in ix" where="__index == 0">
<p class="eventlinkfirst">{{web.link(p.uri, p.title)}}</p>
</div>
<div foreach="var p in ix" where="__index != 0">
<p class="eventlink">{{web.link(p.uri, p.title)}}</p>
</div>
</div>

Might not be the best way, but it works.

[SteveB]

The following doesn't work?

<div foreach="var p in wiki.getsearch{query: 'tag:Event', max: 3, sortby: 'date'}">
<p class="{{__index == 0 ? 'eventlinkfirst' : 'eventlink' }}">{{web.link(p.uri, p.title)}}</p>
</div>

[dalevi]

Great, that worked and made the code a bit sleeker.