I have two similar selections. The first uses a
var $div = $('#div');
var $content = $div.find('div');
console.log($content); //works ($content.length == 1)
var $template = $('#template');
var $content = $template.find('div');
console.log($content); //doesn't work ($content.length == 0)
I'm fairly certain this has to do with Chrome's use of shadow dom (thank Polymer... )
You can either try your luck using the
/deep/ combinator (probably won't work on other browsers), but I think the most robust solution would be
$template.outerHTML as in your comment if you just need the text.
If you need jQuery functionality, using
$.parseXML (to avoid Chrome's native dom construction) would probably do the trick across all browsers (can confirm Chrome + FF).
Example here: http://jsfiddle.net/3fe9jjfj
var tc = $('#template').outerHTML; $template = $($.parseXML(tc)).contents(); console.log($template); console.log($template.find('div'));
Both logs return as we'd expect, and
$template can now be treated as an ordinary jQuery object.