JQuery树遍历-向上遍历树，但不向下遍历

Question

我尝试使用$(document.currentScript)从脚本标记遍历树，然后再向下遍历树，选择输入元素。我尝试了许多不同的下树方法，但它们似乎都不起作用。我能拿到最上面的div，$(document.currentScript).closest("div").parent("div")，但没什么运气

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

Answer 1

听起来你可能有一个解决方案，但这里是使用基本上相同的代码的另一种方法。将当前脚本值存储在一个变量中，然后在文档就绪回调中引用该值：

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

Answer 2

如果您在查找位于当前脚本下面的内容之前等待$(document).ready()，那么它可以很好地工作。

下面是它的工作原理：

​

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

​