JQuery 树遍历 - 上树但不下答案

【问题标题】：JQuery Tree Traversal - Goes Up Tree but not DownJQuery 树遍历 - 上树但不下
【发布时间】：2016-11-22 00:03:20
【问题描述】：

我正在尝试使用$(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>

【问题讨论】：

console.log(test); 是做什么的返回？
reference重要的是要注意，如果脚本中的代码作为回调或事件处理程序被调用，这将不会引用
它没有接收输入 - 我认为这与 DOM 准备就绪有关。如果我将输入放在.control 元素之前，它会找到输入——我什至可以使用test.find('input').val('test'); 更改输入值。但是，如果我添加了文档加载包装器$(function() { /* code here */ }，那么它将被用作回调，@Legends 指出它根本不引用脚本。你能不能创建一个在文档加载后处理的脚本来处理这个脚本的作用（比如循环遍历所有在解析 DOM 后可能需要更改的元素）？
@mark.hch 是对的。事实证明，在寻找其他元素（例如test.find('div') 或test.find('p')）时，我们_only 那些位于<script> 上方的元素。
我的建议是，如果您不能重新排列 HTML，则在正文末尾附加一个脚本 - 类似于 $('.control').each(function() { $(this).find('input').val('something'); /* more code here */ }); 否则，我认为您将无法使用嵌入到您要操作的元素中的脚本来完成此操作，除非它需要与之交互的所有元素都在 DOM 上更高，因此在脚本执行时会被解析。

标签： javascript jquery html tree traversal

【解决方案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>

【讨论】：

我在 div 中有这个脚本的多个实例，但它似乎只检索最后一个。它仍然可以设置最后一个元素
德普。你说得对，我忘了封装它。我会编辑答案。
基本上 thisScript 最终成为一个被覆盖的全局变量，对我来说是糟糕的形式。

【解决方案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>

【讨论】：