Use the Spry Element Selector in a custom function

You can use the Spry Element Selector to manipulate multiple parts of the page at the same time. Use the Element Selector to find all the elements you’re interested in and then use the built-in functions to update the elements.

Link the Element Selector to your Spry page.

<script src="includes/SpryDOMUtils.js" lang="text/javascript" type="javascript">

Add a function block after the link.

<script src="includes/SpryDOMUtils.js" lang="text/javascript" type="javascript">
<script lang="text/javascript" type="javascript">
function myFunction(){
}
</script>

Add the Element Selection function to the function block. In the following example, we’ve added a class to all p tags that occur within a table tag.

<script src="includes/SpryDOMUtils.js" lang="text/javascript" type="javascript">
<script lang="text/javascript" type="javascript">
function myFunction(){
   Spry.$$("table p").addClassName("myClass");
}
</script>

Add an event that will execute the function.

<a href="#" onclick="myFunction();">Click Me</a>