Search code examples
pug

Rendering elements in Jade on one line?

I'm still getting the hang of Jade. The following markup works, however it results in the elements rendering on two seperate lines. I would like the link and the p.some_classname text to render on the same line, but not turn p.some_classname into a hyperlink.

for elem in elems
  a(href="/foo/#{var1}/bar/#{var2}").baz.i.icon-cog
  p.some_classname= elem.id_1 + ' ' + elem.id_2

Is this possible?

Solution

  • If I understand your request correctly, you want the link and the text on the same line with one line per elem. If so you just need to have the paragraph wrap the text and use a span:

    for elem in elems
   p.some_classname 
       a(href="/foo/#{var1}/bar/#{var2}").baz.i.icon-cog
       span= elem.id_1 + ' ' + elem.id_2

    This will generate (for each elem):

    <p class="some_classname"><a href="/foo..." class="baz i icon-cog"><span>{val for id_1} {val for id_2}</span></p>

    Or, you could simplify further and skip the span altogether:

    for elem in elems
   p.some_classname 
       a(href="/foo/#{var1}/bar/#{var2}").baz.i.icon-cog
       | #{elem.id_1} #{elem.id_2}

    Just tested both using node and either works depending on what you want for final markup. HTH.