Ben Humphreys Ben Humphreys - 1 month ago 16
Jade Question

Jade Inline Conditional

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

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
Comments