javascript - JQuery 函数中的 For 循环

Question

我正在尝试在 JSP 文件中使用 JQuery 创建一堆选项卡。 for 循环似乎不会执行多次。我期待看到创建的两个选项卡 + 5 个选项卡。我只看到“登录”、“注册”和“新标签 0”选项卡。我究竟做错了什么？我对此完全陌生。预先感谢您的帮助

下面是整个index.jsp 文件，for 循环位于文件底部的脚本标记内

$((function() {
  var tabs = $("#container").tabs();
  var maxVal = 5;
  var i = 0;
  for (i = 0; i < 5; i++) {
    var ul = tabs.find("ul");
    $("<li><a href='#newtab'>New Tab " + i + " </a></li>").appendTo(ul);
    $("<div id='newtab'>Name :<input type='text'></input></div>").appendTo(tabs);
    tabs.tabs("refresh");
    tabs.tabs('select', 1);
  };
}))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="container">
  <div id="tabs">
    <ul>
      <li><a href="#login">Login</a></li>
      <li><a href="#register">Register</a></li>
    </ul>
    <div id="login">
      <label for="email">Email:</label> <br /> <input type="text" name="email" id="email" /> <br /> <label for="password">Password:</label>
      <br /> <input type="password" name="password" id="password" /> <br />
      <br /> <input type="submit" value="Login">
    </div>
    <div id="register">
      <label for="name">Name:</label><br /> <input type="text" name="name" id="name" /> <br /> <label for="email">Email:</label><br />
      <input type="text" name="email" id="email" /> <br /> <label for="password">Password:</label><br /> <input type="password" name="password" id="password" /> <br /> <label for="address">Address:</label><br />
      <input type="text" name="address" id="address" /> <br /> <br /> <input type="submit" value="Register">
    </div>
  </div>
</div>

Answer 1

您可以通过更改线路来解决此特定问题:

 tabs.tabs('select', 1);

成为

tabs.tabs("option", "selected", 1);

但是，您可能还需要考虑一些其他问题。您在循环中执行的工作超出了必要的范围，而且我不清楚您打算在哪里添加每个选项卡，以及您是否确实将它们添加到您需要的位置。

最后，请研究如何在您使用的任何浏览器中使用 javascript 控制台。运行代码会产生错误:未捕获错误:选项卡小部件实例没有此类方法“选择”，这肯定会帮助您追踪问题。