【发布时间】：2016-03-15 07:39:18
【问题描述】：
假设我在 html 页面上有一个按钮，并且该按钮使用 jQuery 将内容附加到页面（在 jQuery Mobile 环境中）。
我需要一种附加无限多内容 div 的方法，该方法类似于计数器系统，因此可以将生成的第一个内容 div 标记为第一个内容 div 然后可以将下一个标记为第二个，依此类推。
我尝试使用递增的唯一 ID 执行此操作，但它变成了一场噩梦。
怎么样？
假设我添加了 3 个内容 div，但我不喜欢内容 #2，所以我删除了 #2。然后 Content #3 变为 Content #2，因此每个元素都必须更改其 id。
当只有 3 个内容 div 时，这并不复杂，但假设有 30 个内容 div：您删除内容 #2，现在其他 28 个内容 div 必须更改其所有唯一 ID .
最重要的是，在每个内容 div 中，假设有 30 个元素也需要更改其所有唯一 ID。
因此，噩梦。
编辑：这是我上次尝试执行此操作时的一些代码：
//Question Type Visibility
$(document).on("pageinit","#createSurvey", function(){
$("#container").empty();
//Reset qCount
qCount = 0;
$(document).undelegate('#addQ', 'click').delegate('#addQ', 'click', function() {
//Increment question counter
qCount++;
$('\
<div id="newQ' + qCount + '" style="text-align: center !important; -webkit-transform: translateZ(0) !important;">\
<h2 id="num' + qCount + '" style="color: #52D273;">Question ' + qCount + '</h2>\
\
<!--Question Title-->\
<label id="qTitleLabel' + qCount + '" for="qTitle" class="ui-hidden-accessible">\
Question Title:\
</label>\
<input type="text" name="qTitle[]" id="qTitle' + qCount + '" placeholder="Question Title" required>\
<br>\
<h3 id="cat' + qCount + '" style="color: #46BCE1;">Question Category</h3>\
\
<!--Question Category-->\
<label id="qCatLabel' + qCount + '" for="qCat' + qCount + '" class="ui-hidden-accessible">\
Question Category:\
</label>\
<select name="addQCat[]" id="addQCat' + qCount + '" class="' + qCount + '">\
<option selected disabled hidden value=\'\'>Pick a Category</option>\
<option value="Category 1">Category 1</option>\
<option value="Category 2">Category 2</option>\
<option value="Category 3">Category 3</option>\
<option value="Category 4">Category 4</option>\
<option value="Category 5">Category 5</option>\
</select>\
<br>\
<h3 id="type' + qCount + '" style="color: #46BCE1;">Question Type</h3>\
\
<!--Question Type-->\
<label id="qTypeLabel' + qCount + '" for="addQType' + qCount + '" class="ui-hidden-accessible">\
Question Type:\
</label>\
<select name="addQType[]" id="addQType' + qCount + '" class="' + qCount + '">\
<option selected disabled hidden value=\'\'>Pick a Type</option>\
<option value="smallTextDiv">Small Text</option>\
<option value="tORfDiv">True or False?</option>\
<option value="dropdownDiv">Dropdown</option>\
<option value="numDiv">Number</option>\
<option value="radDiv">Radio Buttons</option>\
<option value="largeTextDiv">Large Text</option>\
<option value="checkDiv">Checkboxes</option>\
</select>\
\
<!--Small Text-->\
<div id="smallTextDiv' + qCount + '" class="types' + qCount + '">\
<h2 id="previewSmallText' + qCount + '">Preview</h2>\
<label id="addQSmallTextLabel' + qCount + '" for="addQSmallText' + qCount + '" class="ui-hidden-accessible">\
Preview:\
</label>\
<input type="text" name="addQSmallText' + qCount + '" id="addQSmallText' + qCount + '" placeholder="The user would type their answer in here...">\
</div>\
\
<!--True/False-->\
<div id="tORfDiv' + qCount + '" class="types' + qCount + '">\
<h2 id="previewTOrF' + qCount + '">Preview</h2>\
<div id="switchContainer' + qCount + '">\
<label id="switchLabel' + qCount + '" for="switch' + qCount + '" class="ui-hidden-accessible">\
Preview (A.K.A. On/Off):\
</label>\
<input type="checkbox" data-role="flipswitch" name="switch' + qCount + '" id="switch' + qCount + '" data-on-text="True" data-off-text="False">\
</div>\
\
<label id="replaceOffLabel' + qCount + '" for="replaceOff' + qCount + '" class="ui-hidden-accessible">\
Replace Off:\
</label>\
<input type="text" name="replaceOff' + qCount + '" id="replaceOff' + qCount + '" placeholder="Replace Off Text">\
\
<label id="replaceOnLabel' + qCount + '" for="replaceOn' + qCount + '" class="ui-hidden-accessible">\
Replace On:\
</label>\
<input type="text" name="replaceOn' + qCount + '" id="replaceOn' + qCount + '" placeholder="Replace On Text">\
\
<label id="replaceTextLabel' + qCount + '" for="replaceText' + qCount + '" class="ui-hidden-accessible">\
Replace Text:\
</label>\
<input type="button" value="Replace Text" id="replaceText' + qCount + '" class="' + qCount + '" style="background-color: blue;">\
\
<!--True or False: Off Text-->\
<input type="hidden" name="offTxt[]" id="offTxt' + qCount + '">\
\
<!--True or False: On Text-->\
<input type="hidden" name="onTxt[]" id="onTxt' + qCount + '">\
</div>\
\
<!--Dropdown-->\
<div id="dropdownDiv' + qCount + '" class="types' + qCount + '">\
<h2 id="previewDropDown' + qCount + '">Preview</h2>\
<div id="dropdownContainer' + qCount + '" class= ' + qCount + '>\
<label id="addQDropDownLabel' + qCount + '" for="addQDropDown' + qCount + '" class="ui-hidden-accessible">\
Preview:\
</label>\
<select name="addQDropDown' + qCount + '" id="addQDropDown' + qCount + '" class="0">\
<option selected disabled hidden value=\'\'>Make your Choice</option>\
<option value="Choice 1">Choice 1</option>\
</select>\
</div>\
<br>\
<label id="addChoiceLabel' + qCount + '" for="addChoice' + qCount + '" class="ui-hidden-accessible">\
Add Choice:\
</label>\
<input type="button" value="Add Choice" id="addChoice' + qCount + '" class="' + qCount + '" style="background-color: gold;">\
\
<div id="choicesContainer' + qCount + '"></div>\
<label id="updateChoicesLabel' + qCount + '" for="updateChoices' + qCount + '" class="ui-hidden-accessible">\
Update Choices:\
</label>\
<input type="button" value="Update Choices" id="updateChoices' + qCount + '" class="' + qCount + '" style="background-color: blue;">\
\
<input type="hidden" name="choiceCounter[]" id="choiceCounter' + qCount + '">\
</div>\
\
<!--Number-->\
<div id="numDiv' + qCount + '" class="types' + qCount + '">\
<h2 id="previewNum' + qCount + '">Preview</h2>\
<div id="numContainer' + qCount + '" class="' + qCount + '">\
<label id="addQNumLabel' + qCount + '" for="addQNum' + qCount + '" class="ui-hidden-accessible">\
Number:\
</label>\
<input type="range" name="addQNum' + qCount + '" id="addQNum' + qCount + '" value="5" min="0" max="10" data-popup-enabled="true" data-highlight="true">\
</div>\
\
<label id="replaceMinLabel' + qCount + '" for="replaceMin' + qCount + '" class="ui-hidden-accessible">\
Replace Min:\
</label>\
<input type="number" name="replaceMin' + qCount + '" id="replaceMin' + qCount + '" placeholder="Replace Minimum Number">\
\
<label id="replaceMaxLabel' + qCount + '" for="replaceMax' + qCount + '" class="ui-hidden-accessible">\
Replace Max:\
</label>\
<input type="number" name="replaceMax' + qCount + '" id="replaceMax' + qCount + '" placeholder="Replace Maximum Number">\
\
<label id="replaceNumsLabel' + qCount + '" for="replaceNums' + qCount + '" class="ui-hidden-accessible">\
Replace Nums:\
</label>\
<input type="button" value="Replace Min/Max" id="replaceNums' + qCount + '" class="' + qCount + '" style="background-color: blue;">\
\
<!--Number: Min Text-->\
<input type="hidden" name="minTxt[]" id="minTxt' + qCount + '">\
\
<!--Number: Max Text-->\
<input type="hidden" name="maxTxt[]" id="maxTxt' + qCount + '">\
</div>\
\
<!--Radio Buttons-->\
<div id="radDiv' + qCount + '" class="types' + qCount + '">\
<h2 id="previewRadio' + qCount + '">Preview</h2>\
<div id="radsContainer' + qCount + '" class="0">\
<fieldset id="radsSet' + qCount + '" data-role="controlgroup">\
<label for="rad1' + qCount + '">\
Button 1\
</label>\
<input type="radio" name="rad1' + qCount + '" id="rad1' + qCount + '" class="rads' + qCount + '" value="rad1">\
</fieldset>\
</div>\
<br>\
<label id="addRadLabel' + qCount + '" for="addRad' + qCount + '" class="ui-hidden-accessible">\
Add Radio Button:\
</label>\
<input type="button" value="Add Radio Button" id="addRad' + qCount + '" class="' + qCount + '" style="background-color: gold;">\
<div id="btnContainer' + qCount + '" />\
<label id="updateRadsLabel' + qCount + '" for="updateRads' + qCount + '" class="ui-hidden-accessible">\
Update Radio Buttons:\
</label>\
<input type="button" value="Update Radio Buttons" id="updateRads' + qCount + '" class="' + qCount + '" style="background-color: blue;">\
\
<input type="hidden" name="radCounter[]" id="radCounter' + qCount + '">\
</div>\
\
<!--Large Text-->\
<div id="largeTextDiv' + qCount + '" class="types' + qCount + '">\
<h2 id="previewLargeText' + qCount + '">Preview</h2>\
<label for="addQLargeText' + qCount + '" class="ui-hidden-accessible">\
Large Text:\
</label>\
<textarea name="addQLargeText' + qCount + '" id="addQLargeText' + qCount + '" placeholder="The user would type their answer in here..."></textarea>\
</div>\
\
<!--Checkbox-->\
<div id="checkDiv' + qCount + '" class="types' + qCount + '">\
<h2 id="previewCheck' + qCount + '">Preview</h2>\
<div id="checksContainer' + qCount + '" class="0">\
<fieldset id="checksSet' + qCount + '" data-role="controlgroup">\
<label for="check1' + qCount + '">\
Checkbox 1</label>\
<input type="checkbox" name="check1' + qCount + '" id="check1' + qCount + '" class="checks' + qCount + '" value="check1">\
</fieldset>\
</div>\
<br>\
<label id="addChecksLabel' + qCount + '" for="addChecks' + qCount + '" class="ui-hidden-accessible">\
Add Checkbox Button:\
</label>\
<input type="button" value="Add Checkbox" id="addCheck' + qCount + '" class="' + qCount + '" style="background-color: gold;">\
\
<div id="boxContainer' + qCount + '" />\
<label id="updateChecksLabel' + qCount + '" for="updateChecks' + qCount + '" class="ui-hidden-accessible">\
Update Checkboxes:\
</label>\
<input type="button" value="Update Checkboxes" id="updateChecks' + qCount + '" class="' + qCount + '" style="background-color: blue;">\
\
<input type="hidden" name="checkCounter[]" id="checkCounter' + qCount + '">\
</div>\
<br>\
<div id="delQDiv' + qCount + '">\
<label id="delQLabel' + qCount + '" for="delQ' + qCount + '" class="ui-hidden-accessible">\
Delete Question\
</label>\
<input type="button" value="Delete Question" id="delQ' + qCount + '" class="'+ qCount +'" style="background-color: red !important;"></div>\
</div>').hide().appendTo("#container").fadeIn(1000).enhanceWithin();
【问题讨论】：
-
在这里发布代码。让我们一睹您的噩梦。
-
元素是否需要有唯一的 ID？请描述您最终要实现的目标。可能有更有效的方法来处理您的情况。
-
@VictorLevin 代码按要求发布。
-
@showdev 是的，我相信他们需要唯一的 id，因为每个内容 div 中的大量元素需要按照输入表单的顺序存储在数据库中（因此，如果有 3调查中的问题，那么与第一个问题相关的所有元素都将通过其 id 标识，然后存储，然后与第二个问题相关的所有元素将通过其 id 标识，然后存储，以此类推。 .
-
你说得对，这是你为自己制造的一场噩梦。也许如果您解释如何在数据库中提交/存储调查数据，它可能会让我知道您哪里出错了。据我所知，您不需要增加 id，您只需要在提交表单时计算问题容器
div的实例。当用户在中间删除一个问题时，只需通过迭代容器divs.... 再次更改h2文本....
标签： jquery html jquery-mobile append infinite