如何在jquery中的append函数内为html标签生成变量id
[英]how to generate variable ids for html tags inside append function in jquery
问题描述
this is my code and i want to generate variable ids for the html tags inside the append function while the ids are generating outside where variables are declared but its not taking inside .. 
这是我的代码，我想为append函数内部的html标记生成变量ID，而这些ID则在声明变量的外部生成，但不包含在内部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Bind onclick Event to Dynamically added Elements</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="scriptj.js"></script>
<script type="text/javascript">
i=0;
$(document).ready(function(){
$("#add").click(function func(){
++i;
console.log(i);
var rem = 'remove' + i; // here the ids are generating but they
var tblid = 'id' + i; // not going inside append function
var imgdiv = 'idiv' + i;
var imag = 'img' + i;
$("#diva").append("<div id=tblid style='border:2px solid black; border-radius:5px;'><table align='right'><tr><td><a href='javascript:void(0);' id=rem >Delete</a></td></tr></table><table align='center'><tr><td>Section Title</td><td><input type='textbox' size='160' /></td></tr><tr><td>Descrtiption</td><td><textarea rows='5' cols='162' style='border-radius:5px;'></textarea><td></tr></table><br>   <input type='file' onchange='readURL(this);'/><div id=imgdiv style='border: 1px solid black'><img id=imag alt='your image' /></div></div><br>");
});
$(document).on("click", "a#rem" , function() {
$(this).parent().parent().parent().parent().parent().remove();
});
});
</script>
</head>
<body>
<table><tr><td><button id="add" style='border-radius:3px;'>Add Section</button></td></tr></table>
<br>
<div id="diva">
</div>
</body>
</html>
3 个解决方案
解决方案1
2 2015-12-27 03:22:16
Use the variables when you build the markup. 构建标记时，请使用变量。
var rem = 'remove' + i; // here the ids are generating but they
var tblid = 'id' + i; // not going inside append function
var imgdiv = 'idiv' + i;
var imag = 'img' + i;
var m ="<div id='"+tblid+"' style='border:2px solid black;
border-radius:5px;'><table align='right'><tr><td><a href='javascript:void(0);'
id='"+rem+"' >Delete</a></td></tr></table>
<table align='center'>
<tr><td>Section Title</td><td><input type='textbox' size='160' /></td></tr>
<tr><td>Descrtiption</td><td><textarea rows='5' cols='162'
style='border-radius:5px;'></textarea><td></tr></table>
<br>   <input type='file' onchange='readURL(this);'/>
<div id='"+imgdiv+"' style='border: 1px solid black'>
<img id='"+imag+"' alt='your image' /></div></div>";
$("#diva").append(m);
But, you don't always need to set these id's. 但是，您不一定总是需要设置这些ID。 You can always get the relative items using closest() , find() methods. 您始终可以使用closest() ， find()方法获取相对项。 If you want to keep some data you want to send, Keep that in html 5 attributes. 如果要保留一些要发送的数据，请将其保留在html 5属性中。
解决方案2
2 已采纳 2015-12-27 03:26:06
You are not calling the variables in your code. 您没有在代码中调用变量。 They are being interpreted as string. 它们被解释为字符串。
For example, in this part of your code: 例如，在您的代码的这一部分中：
$("#diva").append("<div id=tblid style='border:2px solid black; ....
tblid is being considered as a string and not as a variable. tblid被认为是字符串而不是变量。 You need to concatenate strings and variables, like so: 您需要连接字符串和变量，如下所示：
$("#diva").append("<div id=" +tblid+ " style='border:2px solid black; ...
解决方案3
1 2015-12-27 04:33:13
您应该像这样编写.append()因为您正在串联一个变量。
$("#diva").append("<div id='" + tblid + '>");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.