Jade Inline Conditional

Question

I'm trying to make everything apart from the first element in an array have a CSS class using the Jade templating engine.

I was hoping I could do it like this, but no luck. Any suggestions?

- each sense, i in entry.senses   div(class="span13 #{ if (i != 0) 'offset3' }")     ... a tonne of subsequent stuff 

I know I could wrap the code as below, but as far as I understand Jade's nesting rules to work, I'd have to duplicate the code or extract it to a Mixin or something.

- each sense, i in entry.senses   - if (i == 0)     .span13       ... a tonne of subsequent stuff   - else     .span13.offset3       ... identical subsequent stuff 

Is there a better way of doing this?

Answer 1

You can do this instead:

- each sense, i in entry.senses   - var klass = (i === 0 ? 'span13' : 'span13 offset3')   div(class=klass)     ... a tonne of subsequent stuff 

Answer 2

This also works:

div(class=(i===0 ? 'span13' : 'span13 offset3'))