is there jade plugin that would allow manipulation using jquery styled syntax

Question

So say if i have li elements, and i want to use java script to a) find element with class X then add modify some attribute of it.

I can run usual JavaScript and it'd be doable, but i have no idea of how to get handle of existing elements and manipulate them. Can you refer to element with in jade, preferably like in jquery $('.a').has(..) This is new idea i haven't seen it mentioned anywhere before.

Usually it's server side ( you manually modify elements ) or you send data along template to client where javascript can tackled actual elements.

You would have to make JQuery available to your jade templates in order to use it. Otherwise, you have to use vanilla JavaScript — sctskw, Feb 24 '15 at 17:53
You can also use interpolation. http://jade-lang.com/reference/interpolation/ — sctskw, Feb 25 '15 at 05:50

score 1 · Answer 1 · answered Feb 24 '15 at 20:57

1

You don't need and shouldn't manipulate your markup before you rending it. Just create a jade mixin where you can pass params to customize your markup output.

If you want a more precise answer, provide a concrete example how you would do it in jQuery.

If you want to change a DOM on the server side, you can use cheerio, but for rendering templates for the client you should never do this!

answered Feb 24 '15 at 20:57

timaschew

16,254
6
61
78

example, i have nav header with li type menu items. i want to apply selected to li which is in `.nav` and has id `#about`. So i can pass object like this to parser `{selected:'about', title:'about'...}` – Muhammad Umer Feb 24 '15 at 23:03
Then you should just do an inline css conditional using a template var.http://stackoverflow.com/questions/14144274/jade-conditional-if-else-to-add-class-to-div-inline – sctskw Feb 25 '15 at 05:48

score 0 · Accepted Answer · answered Feb 25 '15 at 16:13

This code does more or less what i wanted. And it's natively supported. It's called conditional attributes in docs.

You can find more information about it in attribute section.

Only works with latest version of jade.

//- Suppose object passed is this
- var selected='about';
li(class={selected:selected=="home"}) Home
li(class={selected:selected=="blog"}) Blog
li(class={selected:selected=="about"}) About

..Will result in this:

<li>Home</li>
<li>Blog</li>
<li class="selected">About</li>

is there jade plugin that would allow manipulation using jquery styled syntax

2 Answers2