在webform中我正在克隆并使用jQuery插入div onclick，现在可以正常工作了。但是，我在尝试将渐进ID分配给DIV中的所有克隆元素时遇到问题。
如何为“＃issueDiv1”中的每个克隆元素分配新的或渐进式ID？
另外如何让removeButton删除以前克隆的DIV？
的jQuery
$(document).ready(function() {
$('#addButton').click(function(){
$('#issueDiv1').clone().insertAfter('#issueDiv1');
});
});
DIV
<div id="issueDiv">
<div id="issueDiv1">
<fieldset id="yourIssue">
<legend>Request Details</legend>
<p>Please choose what your issue(s) is below. (Please note if you have multiple balances out you will need to submit each one separately)</p>
<p>
<label>Your Request:</label>
<select type="text" class="required" name="request_details[]" id="requestdetails1" onchange="setspecificDetails(this);">
<option value="">Select...</option>
<option value="Trust Balance out">Trust Balance out</option>
<option value="Bank Balance out">Bank Balance out</option>
<option value="Tixc out">Tixc out</option>
<option value="Ins out">Ins out</option>
<option value="3rd Party out">3rd Party out</option>
<option value="Comm out">Comm out</option>
<option value="Tax out">Tax out</option>
<option value="Other">Other</option>
</select>
</p>
</fieldset>
<div id="trustBalance" class="greyBox">
<p><label>Date this balance went out according to the NBS auto-validation history search in Sherlock?</label><input type="text" class="required date-picker tinyInput" id="datetrustbalanceout1" name="date_trust_balance_out"/> *</p>
<br />
<br />
<p><label>Did an amount search bring back any further details that reate to the issue?</label></p>
<textarea id="trustamountsearch1" name="trust_amount_search" class="required" cols="90" rows="1" class="required"></textArea>
*
<br />
<br />
<p><label>Did the closed ledgers with non-zero balances search in Sherlock bring back any further information,</label></p>
<p><label> if so please provide details below or attach screenhot:</label></p>
<textarea id="trustclosedledgerssearch1" name="trust_closedledgers_search" class="required" cols="90" rows="1" class="required"></textArea>
*
<br />
<br />
<p><label>Please prodive any further details that might be relevant to the issue:</label></p>
<textarea id="trustfurtherdetails1" name="trust_further_details" class="required" cols="90" rows="1" class="required"></textArea>
*
</div>
<div id="bankBalance" class="greyBox">
<p><label>Date this balance went out according to the NBS auto-validation history search in Sherlock?</label><input type="text" class="required date-picker tinyInput" id="datebankbalanceout1" name="date_bank_balance_out"/> *</p>
<br />
<br />
<p><label>Did an amount search bring back any further details that reate to the issue?</label></p>
<textarea id="bankamountsearch1" name="bank_amount_search" class="required" cols="90" rows="1" class="required"></textArea>
*
<br />
<br />
<p><label>Did the compare bank rec history against statement search in Sherlock bring back any infomation?</label></p>
<p><label>Please provide details below or attach screenshot.</label></p>
<textarea id="comparebanksearch1" name="compare_bank_search" class="required" cols="90" rows="1" class="required"></textArea>
*
<br />
<br />
<p><label>Please prodive any further details that might be relevant to the issue:</label></p>
<textarea id="bankfurtherdetails1" name="bank_further_details" class="required" cols="90" rows="1" class="required"></textArea>
*
</div>
<div id="tixcOut" class="greyBox">
<p><label>(Please make sure you have carried out an amount search to provide further details on the issue)</label></p>
<br />
<br />
<p><label>Date this balance went out according to the NBS auto-validation history search in Sherlock?</label><input type="text" class="required date-picker tinyInput" id="datetixcout1" name="date_tixc_out"/> *</p>
<br />
<br />
<p><label>Did the statements and payments search in Sherlock bring back any further details that relate to the issue?</label></p>
<p><label> Please provide details below or attach screenshot:</label>
<p>
<textarea id="tixcsearch1" name="tixc_search" class="required" cols="90" rows="1" class="required">
</textArea> *
<br />
<br />
<p><label>Please prodive any further details that might be relevant to the issue:</label></p>
<textarea id="tixcfurtherdetails1" name="tixc_further_details" class="required" cols="90" rows="1" class="required"></textArea>
*
</div>
<div id="insOut" class="greyBox">
<p><label>(Please make sure you have carried out an amount search to provide further details on the issue)</label></p>
<br />
<br />
<p><label>Date this balance went out according to the NBS auto-validation history search in Sherlock?</label><input type="text" class="required date-picker tinyInput" id="dateinsout1" name="date_ins_out"/> *</p>
<br />
<br />
<p><label>Did the statements and payments search in Sherlock bring back any further details that relate to the issue?</label></p>
<p><label> Please provide details below or attach screenshot:</label>
<p>
<textarea id="insOutsearch1" name="insOut_search" class="required" cols="90" rows="1" class="required">
</textArea> *
<br />
<br />
<p><label>Please prodive any further details that might be relevant to the issue:</label></p>
<textarea id="insOutfurtherdetails1" name="insOut_further_details" class="required" cols="90" rows="1" class="required"></textArea>
*
</div>
<div id="3rdParty" class="greyBox">
<p><label>(Please make sure you have carried out an amount search to provide further details on the issue)</label></p>
<br />
<br />
<p><label>Date this balance went out according to the NBS auto-validation history search in Sherlock?</label><input type="text" class="required date-picker tinyInput" id="date3rdpartyout1" name="date_3rdparty_out"/> *</p>
<br />
<br />
<p><label>Did the fin unbalances 3P types search in Sherlock bring back any further details that relate to the issue?</label></p>
<p><label> Please provide details below or attach screenshot:</label>
<p>
<textarea id="3rdpartysearch1" name="3rdparty_search" class="required" cols="90" rows="1" class="required">
</textArea> *
<br />
<br />
<p><label>Please prodive any further details that might be relevant to the issue:</label></p>
<textarea id="3rdpartyfurtherdetails1" name="3rdparty_further_details" class="required" cols="90" rows="1" class="required"></textArea>
*
</div>
<div id="commOut" class="greyBox">
<p><label>(Please make sure you have carried out an amount search to provide further details on the issue)</label></p>
<br />
<br />
<p><label>Date this balance went out according to the NBS auto-validation history search in Sherlock?</label><input type="text" class="required date-picker tinyInput" id="datecommout1" name="date_comm_out"/> *</p>
<br />
<br />
<p><label>Did the statements and payments search in Sherlock bring back any further details that relate to the issue?</label></p>
<p><label> Please provide details below or attach screenshot:</label>
<p>
<textarea id="commOutsearch1" name="commOut_search" class="required" cols="90" rows="1" class="required">
</textArea> *
<br />
<br />
<p><label>Please prodive any further details that might be relevant to the issue:</label></p>
<textarea id="commOutfurtherdetails1" name="commOut_further_details" class="required" cols="90" rows="1" class="required"></textArea>
*
</div>
<div id="taxOut" class="greyBox">
<p><label>(Please make sure you have carried out an amount search to provide further details on the issue)</label></p>
<br />
<br />
<p><label>Date this balance went out according to the NBS auto-validation history search in Sherlock?</label><input type="text" class="required date-picker tinyInput" id="datetaxout1" name="date_tax_out"/> *</p>
<br />
<br />
<p><label>Did the statements and payments search in Sherlock bring back any further details that relate to the issue?</label></p>
<p><label> Please provide details below or attach screenshot:</label>
<p>
<textarea id="taxOutsearch1" name="taxOut_search" class="required" cols="90" rows="1" class="required">
</textArea> *
<br />
<br />
<p><label>Please prodive any further details that might be relevant to the issue:</label></p>
<textarea id="taxOutfurtherdetails1" name="taxOut_further_details" class="required" cols="90" rows="1" class="required"></textArea>
*
</div>
<div id="otherDiv" class="greyBox">
<p><label>Please state the problem below and provide as much detail as possible (along with relevant screenshots):</label></p>
<textarea id="otherdetails1" name="other_details" class="required" cols="90" rows="5" class="required"></textArea>
*
</div>
</div>
</div>
按钮
<p><input type='button' value='Add another issue' id='addButton' class='clone' style='width: 200px; height: 40px' /></p>
<p><input type='button' value='Remove' id='removeButton' class='remove' style='width: 200px; height: 40px' /></p>
答案 0 :(得分：0)
相反，使用一个类，并使用jQuery的.find，.parent，.children和this函数，这样你就可以找到相对的html元素彼此。
对于您的示例，您似乎想要独特的ID，因此您不会有重复项。我建议您执行以下操作，这样您就不必担心重复的ID：
将您的issueDivs放入包装器div中，并为您的div提供一个类
<div id='issues'>
<div class='issueDiv'></div>
<div class='issueDiv'></div>
</div>
然后执行以下操作：
$(document).ready(function() {
$('#addButton').click(function(){
$('#issues').append($('.issueDiv').first().clone());
//this gets the first div with class 'issueDiv'
//there's also a .last() function,
//which will get the last one in the list
});
});
答案 1 :(得分：0)
为了维护issue div的渐进式id，可以将id值存储到jquery中的global var。
$(document).ready(function() {
var issueid =2;
$(document).on('click','#addButton',function(){
var node =$('<div id="issueDiv' + issueid + '">'+$('issueDiv1').html()+'</div>');
node.insertAfter('#issueDiv'+(issueid -1));
issueid = issueid + 1;
})
$(document).on('click','#removeButton',function(){
var node=$('#issueDiv'+issueid);
node.remove();
issueid = issueid - 1;
});
});});