Question

I have following markup,

<div custom="">
  <div>
     <template>
        <a custom="">  (anything inside template should not be selected)
        </a>
     </template> 
  </div>
</div>

<a custom=""></a>

I want to select all element that has custom attribute but not anything that is inside “template” node.

I have tried following but does not work,

$(":not(template *) [custom]")
$(":not(template) [custom]")
$(":not(template) *[custom]")
$(":not(template *)[custom]")
$(":not(template)").filter('[custom]')) // this does not work either...
$(":not(template,template *)").filter('[custom]')) // this does not work either...

But this does not work. Any simpler way to do this? I am not getting any elements in query.

I know, template is not a standard html. But its my custom tag to have proper tag within html instead of wrapping in non standard script where markup validation is not possible.

Answer 1

Give this a shot.

$('[custom]:not(template *)');

jsFiddle.

This selects all elements with a custom attribute (including descendants of template), and then throws away the elements which are a descendant of a template element.