7 Replies Latest reply: Aug 15, 2011 12:31 AM by MyDreamweaverExtensions RSS

    Use Spry.$$ functions with Ancestor node

    Phil_W Community Member

      Hi,

       

      I wish to be able to select a node, navigate its parent (no more than 2 levels up the dom tree) and then add and remove some classes with the addClassName and removeClassName functions of Spry.$$

       

      I've found the.Spry.Utils.getAncestor function but cannot find documentation on it.

       

      Is it possible to use the Spry.$$ functions with the parent node of a node selected?

       

      var achild = Spry.$$("#child");
      var a = Spry.Utils.getAncestor(achild).addClassName("parent")

       

      Hopefully you get the idea of what I need to be able to do.

       

      I don't have full control over the html elements I'm trying to select and add classes to. This runs within a SharePoint environment.

       

      Other thoughts appreciated.

       

      Phil

        • 1. Re: Use Spry.$$ functions with Ancestor node
          Phil_W Community Member

          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 Community Member

            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 Community Member

              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 Community Member

                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 Community Member

                  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 Community Member

                    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 Community Member

                      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