Question

我正在使用这个表单（测试）创建器，其中使用jQuery克隆包含表单元素的div以创建更多问题。原来的div是隐藏的。每个div还有一个附加onClick="javascript:$(this).parent().empty().remove();"的按钮。我的问题是divs编号为question1，问题2等，通过检查有多少个具有类question的div，然后将该数字附加到'question'并将question1（或question2，question3等）设置为id为cloned div-由于隐藏了原始div，因此不需要为该类的div数量+1。但是当一个如果div被删除时，编号就会搞砸了。例如：
1.添加Div 2. Div称为问题1（id =问题1）
3.增加了另一个div 4. Div称为问题2（id = question2）
5.First Div被删除。
6.添加另一个div 7.新的div被称为问题2（id = question2）
8.Question 2（id = question2）已经存在，因为第二个div没有被删除。当删除其中一个时，我需要重新编号div。这是克隆div的代码：

function copyAppendQ() {
  question = document.getElementById("question");
  clone=question.cloneNode(true);
  numberOfQuestions = $('.question').length;
  id = "questioncon"+(numberOfQuestions);
  clone.id=id;
  question.parentNode.appendChild(clone);
  inid= "question"+(numberOfQuestions);
  optionid= "optionsdiv"+(numberOfQuestions);
  $('#'+id+' '+'.'+'questionin').attr('id', inid);
  $('#'+id+' '+'.'+'options').attr('id', optionid);
 $('#' + id + ' h2').html( 'Question ' + numberOfQuestions );
}

和div（这个div是隐藏的但是用不同的id克隆，删除原始div上的display:none属性集，当调用上面的函数时）

<div id="question" class="question">
                <h2></h2>
                <input id="questionin" class="questionin" style="width:341px;" ><input type="button" id="remq" onClick="javascript:$(this).parent().empty().remove();" style="background-color:#E12E1E;border:0;width:120px;color:#fff;" value="Remove Question">
                <h3>Options</h3>
                <div class="options">
                <label>a.</label><input class="option optiona"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="a" name="answer">&nbsp;
                <label>b.</label><input class="option optionb"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="b" name="answer">
                <div class="clear"></div>
                <label>c.</label><input class="option optionc"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="c" name="answer">&nbsp;
                <label>d.</label><input class="option optiond"><input onClick="setAnswer(this.parentNode.id, this.className)" type="radio" class="d" name="answer">
                </div>  
                </div>

这可以在这里看到：http://bit.ly/R8hB2m

Answer 1

使用以下命令启动copyAppendQ功能：

copyAppendQ.id = (copyAppendQ.id || 0)+1;

然后在分配ID时：

id = "questioncon"+copyAppendQ.id;

这将确保即使问题被删除，您也不会两次获得相同的ID。

删除一个克隆的div时重新编号克隆的div

1 个答案: