-
1. Re: Use Spry.$$ functions with Ancestor node
Phil_W Aug 12, 2011 1:59 PM (in response to Phil_W)ok, worked out how to do it, but it's not elegant
Spry.$$(".child").forEach(function(n) {n.parentNode.setAttribute("parent","marked");} );
Spry.$$('div[parent="marked"]').addClassName("red").addClassName("local").removeAttribute( "parent");
Phil
-
2. Re: Use Spry.$$ functions with Ancestor node
MyDreamweaverExtensions Aug 13, 2011 5:50 AM (in response to Phil_W)Hello,
This should work, and is much simplier than your workaround:
Spry.Utils.addClassName(Spry.Utils.getAncestor(Spry.$('child')), 'parent');
-
3. Re: Use Spry.$$ functions with Ancestor node
Phil_W Aug 13, 2011 5:59 AM (in response to MyDreamweaverExtensions)Hi,
The child selector is a bit more complex than my sample. Does your suggestion work with more advanced css selectors? I'm not at work and can't recall the exact selector I will need to use to find the children, but it not a simple id as per my original example. (there will be multiple child matches and hence multiple parents to add the classes to).
Cheers
Phil
-
4. Re: Use Spry.$$ functions with Ancestor node
MyDreamweaverExtensions Aug 13, 2011 7:44 AM (in response to Phil_W)You then have to use the forEach element selector function. Here is a test page for you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script><style type="text/css">
.redBorder {
border: 1px solid #F00;
}
</style>
</head><body>
<h1>Test: getAncestor</h1>
<div>
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
<div>
<p>paragraph3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
</div>
<div>
<p>paragraph 6</p>
<p>paragraph 7</p>
</div>
<script type="text/javascript">
Spry.$$("p").forEach(function(n) {
Spry.Utils.addClassName(Spry.Utils.getAncestor(n), 'redBorder');
});
</script></body>
</html>Your selector might be more complicated, but you just have to adapt it. As long as you get an array of elements, this way will work anyway.
Hope this helps,
Xav
-
5. Re: Use Spry.$$ functions with Ancestor node
Phil_W Aug 13, 2011 12:46 PM (in response to MyDreamweaverExtensions)Yes that'll work. You arew right that the css selctor is more complication but the principle is the same. What do you know about the second parameter the getAncestor accepts for finding an ancestor. Can I use full CSS selectors in there as well / what are its limitations?
-
MyDreamweaverExtensions <forums@adobe.com> wrote:
You then have to use the forEach element selector function. Here is a test page for you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
<style type="text/css">
.redBorder {
border: 1px solid #F00;
}
</style>
</head>
<body>
h1. Test: getAncestor
<div>
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
<div>
<p>paragraph3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
</div>
<div>
<p>paragraph 6</p>
<p>paragraph 7</p>
</div>
<script type="text/javascript">
*Spry.$$("p").forEach(function(n) {
Spry.Utils.addClassName(Spry.Utils.getAncestor(n), 'redBorder');
});*
</script>
</body>
</html>
Your selector might be more complicated, but you just have to adapt it. As long as you get an array of elements, this way will work anyway.
Hope this helps,
Xav
>
-
6. Re: Use Spry.$$ functions with Ancestor node
Phil_W Aug 14, 2011 3:38 PM (in response to Phil_W)Top man, much more elegant. Hadn't thought of running the ancestor function inside the foreach construct.
-
7. Re: Use Spry.$$ functions with Ancestor node
MyDreamweaverExtensions Aug 15, 2011 12:31 AM (in response to Phil_W)Cool.
About the second parameter of the getAncestor() function, judging by the code, it just works like Spry.$$(), so you should be able to use the same CSS sequences to restrict the search to a particular node. Have a look at the following modified test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script><style type="text/css">
.redBorder {
border: 1px solid #F00;
}
</style>
</head><body>
<h1>Test: getAncestor</h1>
<div id="div1">
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
<div id="div2">
<p>paragraph3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
</div>
<div id="div3">
<p>paragraph 6</p>
<p>paragraph 7</p>
</div>
<script type="text/javascript">
Spry.$$("p").forEach(function(n) {
Spry.Utils.addClassName(Spry.Utils.getAncestor(n, "#div2"), 'redBorder');
});
</script></body>
</html>Xav

