I've been trying a few different ways to filter finding of specific nodes within my html.
Here is some example html:
<body>
<div ui:component="component1"></div>
<ul ui:component="component2"></ul>
<article ui:component="component3"></article>
</body>
I've successfully been able to match items by doing a simple filter:
// returns div, ul, article
$('[ui\\:component]').each();
However, when I start filtering it based on a parent node, it starts to fail on me. I've tried:
$('[ui\\:component]', $('body')); // returns []
$('body').find('[ui\\:component]'); // returns []
$('body').filter('[ui\\:component]'); // returns []
$('body').find('*').filter('[ui\\:component]'); // returns []
What am I doing wrong here? At first I thought it could be the ui namespace, but adding it to the html doc or the body doesn't seem to do anything of significance. Help much appreciated
FULL SOURCE BELOW:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div ui:component="component1"></div>
<ul ui:component="component2"></ul>
<article ui:component="component3"></article>
</body>
<script type="text/javascript">
$(document).ready(function() {
// returns div, ul, article
console.log($('[ui\\:component]'));
// these all return nada
console.log($('[ui\\:component]', $('body')));
console.log($('body').find('[ui\\:component]'));
console.log($('body').filter('[ui\\:component]'));
console.log($('body').find('*').filter('[ui\\:component]'));
});
</script>
</html>