我有两个div叫做“answerdiv 1”& html中的“answerdiv 2”。
现在我想给/创建div id,如“answerdiv 3”“answerdiv 4”“answerdiv 5”等等。
使用javascript / jquery如何在这些动态创建的div中追加内容,哪些id应该是唯一的?
在我的项目中,用户可以添加“n”个div,对它没有严格的限制。
帮帮我。
感谢Adv
=============================================== =================================
我的HTML代码是:
<div id="answertextdiv">
<textarea id="answertext" name="answertext" placeholder="Type answer here" rows="2" cols="40" tabindex="6" onBlur="exchangeLabelsanswertxt(this);"></textarea>
</div>
我的JS代码:
function exchangeLabelsanswertxt(element)
{
var result = $(element).val();
if(result!="")
{
$(element).remove();
$("#answertextdiv").append("<label id='answertext' onClick='exchangeFieldanswertxt(this);'>"+result+"</label>");
}
}
function exchangeFieldanswertxt(element)
{
var result = element.innerHTML;
$(element).remove();
$("#answertextdiv").append("<textarea id='answertext' name='answertext' placeholder='Type answer here' rows='2' cols='40' tabindex='6' onBlur='exchangeLabelsanswertxt(this);'>"+result+"</textarea>");
}
现在从上面的代码中我想将所有内容附加到唯一的“answertextdiv”id中。
答案 0 :(得分:8)
如果您的div位于以下容器中:
<div id="container">
<div id="answerdiv 1"></div>
<div id="answerdiv 2"></div>
</div>
你可以做点什么:
//Call this whenever you need a new answerdiv added
var $container = $("container");
$container.append('<div id="answerdiv ' + $container.children().length + 1 + '"></div>');
如果可能的话,尽量不要使用全局变量......他们最终会回过头来咬你,在这种情况下你真的不需要全局变量。
答案 1 :(得分:3)
您可以尝试这样的方法来创建具有唯一ID的div。
HTML
<input type="button" value="Insert Div" onClick="insertDiv()" />
<div class="container">
<div id="answerdiv-1">This is div with id 1</div>
<div id="answerdiv-2">This is div with id 2</div>
</div>
的JavaScript
var i=2;
function insertDiv(){
for(i;i<10;i++)
{
var d_id = i+1;
$( "<div id='answerdiv-"+d_id+"'>This is div with id "+d_id+"</div>" ).insertAfter( "#answerdiv-"+i );
}
}
以下是DEMO
答案 2 :(得分:1)
你应该在Javascript中保留一个“全局”变量,并创建div的数量,每次创建div时,你都会增加它。 示例代码:
<script type="text/javascript">
var divCount = 0;
function addDiv(parentElement, numberOfDivs) {
for(var i = 0; i < numberOfDivs; i++) {
var d = document.createElement("div");
d.setAttribute("id", "answerdiv"+divCount);
parentElement.appendChild(d);
divCount++;
}
}
</script>
请记住,jQuery不需要在Javascript中执行很多操作。它只是一个图书馆,可以帮助你“减少写作,做更多”。
答案 3 :(得分:1)
我在下面的JQuery代码中使用了相同的
$("#qnty1").on("input",function(e)
{
var qnt = $(this).val();
for (var i = 0; i < qnt; i++) {
var html = $('<div class="col-lg-6 p0 aemail1"style="margin-bottom:15px;"><input type="text" onkeyup= anyfun(this) class="" name="email1'+i+'" id="mail'+i+'" > </div><div id=" mail'+i+'" class="lft-pa img'+i+' mail'+i+'" > <img class="" src="img/btn.jpg" alt="Logo" > </div> <div id="emailer1'+i+'" class=" mailid "></div>');
var $html=$(html);
$html.attr('name', 'email'+i);
$('.email1').append($html);
}
}
我的HTML包含如下文本框。
<input type="text" name="qnty1" id="qnty1" class="" >
和
<div class="email1">
</div>
答案 4 :(得分:0)
你需要一个全局计数器(更一般地说:一个唯一的id生成器)来显式或隐式地生成id(后者例如通过选择最后生成的div,由类或它们的id前缀标识)。
然后尝试
var newdiv = null; // replace by div-generating code
$(newdiv).attr('id', 'answerdiv' + global_counter++);
$("#parent").append(newdiv); // or wherever
答案 5 :(得分:0)
<controls:MetroWindow.RightWindowCommands>
<controls:WindowCommands ItemsSource="{Binding Commands}">
<controls:WindowCommands.ItemTemplate>
<DataTemplate DataType="{x:Type local:Model}">
<Button Content="{Binding Name}" />
</DataTemplate>
</controls:WindowCommands.ItemTemplate>
</controls:WindowCommands>
</controls:MetroWindow.RightWindowCommands>
var newdivcount=0;
function insertDivs(){
newdivcount=newdivcount+1;
var id="answerdiv-"+(newdivcount);
var div=document.createElement("DIV");
div.setAttribute("ID",id);
var input=document.createElement("TEXTAREA");
div.appendChild(input);
document.getElementById('container').appendChild(input);
}
答案 6 :(得分:0)
这是您可以尝试的另一种方法
// you can use dynamic Content
var dynamicContent = "Div NO ";
// no of div you want
var noOfdiv = 20;
for(var i = 1; i<=noOfdiv; i++){
$('.parent').append("<div class='newdiv"+i+"'>"+dynamicContent+i+"</div>" )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
</div>