CODEWITHSUNDEEP
javascriptjqueryhtmltreetraversal
James
James

Reputation: 708

JQuery Tree Traversal - Goes Up Tree but not Down

I am trying to traverse up the tree from the script tag using $(document.currentScript) and then traverse back down the tree, selecting the input element. I have tried many variations of going down the tree but they all don't seem to work. I was able to get the top div, $(document.currentScript).closest("div").parent("div") but have no luck going down

<div id="p9t2c13">
   <div class="control">
      <label for="c13">
         <h3> HiddenInstanceId </h3>
         <p>
            <script>
               if (typeof counter == "undefined") {
                  counter = 0;
               }

               counter++;

               var test = $(document.currentScript).closest("div").parent("div");
               console.log($(test).find("input"))
            </script>
         </p>
      </label>
      <p class="ctrlinvalidmessage"></p>
      <fieldset>
         <div class="input text">
            <input id="c13" type="text" name="c13" value="" maxlength="1000">
         </div>
      </fieldset>
   </div>
</div>

Upvotes: 1

Views: 117

Answers (2)

cFreed
cFreed

Reputation: 4474

It works fine if you wait for $(document).ready() before looking for something located below the current script.
Here it's working:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="p9t2c13">
   <div class="control">
      <label for="c13">
         <h3> HiddenInstanceId </h3>
         <p>
            <script>
               if (typeof counter == "undefined") {
                  counter = 0;
               }

               counter++;

               var test = $(document.currentScript).closest("div").parent("div");
               // here is the change:
               $(document).ready(function() {console.log(test.find("input"));});
            </script>
         </p>
      </label>
      <p class="ctrlinvalidmessage"></p>
      <fieldset>
         <div class="input text">
            <input id="c13" type="text" name="c13" value="" maxlength="1000">
         </div>
      </fieldset>
   </div>
</div>

Upvotes: 1

Yona Appletree
Yona Appletree

Reputation: 9142

It sounds like you may have a solution, but here is another way using basically the same code. You store the current script value in a variable, then reference that in a document ready callback:

<div id="p9t2c13">
   <div class="control">
      <label for="c13">
         <h3> HiddenInstanceId </h3>
         <p>
            <script>
               (function(){
                   var thisScript = $(document.currentScript);

                   $(function(){
                       var test = thisScript.closest("div").parent("div");
                       console.log($(test).find("input")) 
                   });
               })();
            </script>
         </p>
      </label>
      <p class="ctrlinvalidmessage"></p>
      <fieldset>
         <div class="input text">
            <input id="c13" type="text" name="c13" value="" maxlength="1000">
         </div>
      </fieldset>
   </div>
</div>

Upvotes: 1

Related Questions