express interprets JADE unexpectedly when using a(href)

Question

In an express app I have a Jade file that looks like this

each tweet, index in tweetData
///some variable declarations
    a( class="fancybox" rel="group" href=tweet.media_url tweetLink=tweetLink data-widgetIndex=widgetIndex title="default text" profile_image_url=tweet.profile_image_url)
        img(src=tweet.media_url alt="" width="150" height="150")
        div(id=widgetIndex, style="display:none")
            div(style="min-height:200px")  Hello world
                div(style="float:left;width:52px;height:100%; display:inline;margin-right:5px")
                    a(href="#")  //<---- this causes trouble!!!!!
                        img(src=tweet.profile_image_url, style="width:52px;height:48px;background:#bfb;")
                    div(style="height:48px;background:#bfb;") BALLS

If you look closely, a(class="fancy box ...) is interpreted multiple times for each time through the loop. (It should only be once per time through loop.)

<a class="fancybox" profile_image_url="http://pbs.twimg.com/profile_images/378800000365890826/c04bf726e47f3eda2116b5249e623a43_normal.jpeg" title="default text" data-widgetindex="widget0" tweetlink="http://twitter.com/Sjaakvdvoort/status/undefined" href="http://pbs.twimg.com/media/BXM0sjpCUAAEHOr.png" rel="group">
    <img width="150" height="150" alt="" src="http://pbs.twimg.com/media/BXM0sjpCUAAEHOr.png"></img>
</a>
<div id="widget0" style="display:none">
    <a class="fancybox" profile_image_url="http://pbs.twimg.com/profile_images/378800000365890826/c04bf726e47f3eda2116b5249e623a43_normal.jpeg" title="default text" data-widgetindex="widget0" tweetlink="http://twitter.com/Sjaakvdvoort/status/undefined" href="http://pbs.twimg.com/media/BXM0sjpCUAAEHOr.png" rel="group"></a>
    <div style="min-height:200px">
        <a class="fancybox" profile_image_url="http://pbs.twimg.com/profile_images/378800000365890826/c04bf726e47f3eda2116b5249e623a43_normal.jpeg" title="default text" data-widgetindex="widget0" tweetlink="http://twitter.com/Sjaakvdvoort/status/undefined" href="http://pbs.twimg.com/media/BXM0sjpCUAAEHOr.png" rel="group"></a>
        <div style="float:left;width:52px;height:100%; display:inline;margin-right:5px">
            <a class="fancybox" profile_image_url="http://pbs.twimg.com/profile_images/378800000365890826/c04bf726e47f3eda2116b5249e623a43_normal.jpeg" title="default text" data-widgetindex="widget0" tweetlink="http://twitter.com/Sjaakvdvoort/status/undefined" href="http://pbs.twimg.com/media/BXM0sjpCUAAEHOr.png" rel="group"></a>
            <a href="#">...</a>
            <div style="height:48px;background:#bfb;">
                BALLS
            </div>
        </div>
    </div>
</div>

If I comment out the a(href="#") then those extra a(class="fancy box") elements are not rendered. What gives?

[An `` shouldn't contain a `
`](http://stackoverflow.com/q/1827965). — Jonathan Lonowski, Jan 04 '14 at 03:22

score 0 · Accepted Answer · answered Jan 06 '14 at 03:14

I believe the underlying problem was I had an anchor tag within an anchor tag. I had set up this structure because I actually use jquery to grab the inner anchor tag and display it elsewhere (in a lightbox). If I make the inner anchor tag a cousin (not a descendent) of the outer anchor tag the Jade is interpreted by the outer.

express interprets JADE unexpectedly when using a(href)

1 Answers1