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?

1
33
9/27/2011 2:43:59 AM

Accepted 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
46
9/27/2011 3:06:03 AM

This also works:

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

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon