Question

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

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

Dim sql as String
sql = "SELECT ID, Name FROM Table WHERE Table.ID IN (" & getIDs() & ")"
cbo.RowSource = sql

$((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);
  };
}))

Answer 1

足以说明问题。我希望jQuery不仅可以使用$函数。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
      <div id="tabs">
				<ul>
					<li><a href="#login">Login</a></li>
					<li><a href="#register">Register</a></li>
				</ul>
			</div>
</body>
</html>
                
<script>
(function() {
            for(var i=0; i<5; i++) {
                $( "<li><a href='#newtab"+i+"'>New Tab " + i + " </a></li>" ).appendTo("ul");
            }            
})();     
</script>

Answer 2

非常感谢！您的回复帮助我调试和修复了代码。下面是代码a-这正是我所期望的！

    `<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Empty Tabs Example</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">

<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-ui.js"></script>

</head>
<body>
		<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>
</body>

<script>
$((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_" + i + ">New Tab " + i + " </a></li>" ).appendTo(ul);
            $( "<div id=newtab_" + i + ">Name :<input type='text'></input></div>" ).appendTo(tabs);
            tabs.tabs("refresh");
            tabs.tabs("option", "active", 0);
 		}
    }));
</script>

</html>`

JQuery函数内的For循环

2 个答案: