Question

我有以下

组

<div id="question[1]" class="questions">
  <p> Question: </p>
  <input type="text" id="quizQuestion[1]" name="quizQuestion[1]" placeholder=" Question">
  <input type="text" id="quizAnswer[1][1]" name="quizAnswer[1][1]" placeholder=" First Answer">
  <input type="text" id="quizAnswer[1][2]" name="quizAnswer[1][2]" placeholder=" Second Answer">
  <input type="text" id="quizAnswer[1][3]" name="quizAnswer[1][3]" placeholder=" Third Answer">
  <input type="text" id="quizAnswer[1][4]" name="quizAnswer[1][4]" placeholder=" Fourth Answer">
</div>

我希望1变成2 ......等等。

我虽然重新创建了表单中的每个元素，但必须有更好的方法吗？

// last id is found using regex (search for the only number in the id) 
function createQuestion(lastId){
  id = lastId + 1;
  $('<div>').attr({
    id: 'question[id]',
    name: 'bar'
    }).appendTo('form');
    // create the rest of the inputs here (and added inside the created div)
}

Answer 1

我认为你只是在寻找一个正则表达式来解析当前正在使用的数字，是吗？如果是这样，那么做这样的事情应该有效。

var id = $('div').prop('id');
var matches = id.match(/(\d+)/g);
//matches will contain an array of numbers from the id

因此，如果您使用id="quizAnswer[1][3]"定位元素，则匹配将为[1, 3]。定位id="quizQuestion[2]"的匹配项为[2]。

Answer 2

你可以使用这样的东西

function NewQuestion(IDChane){
var html = '<div id="question['+ IDChane +']" class="questions">'+
  '<p> Question: </p>'+
  '<input type="text" id="quizQuestion['+ IDChane +']" name="quizQuestion['+ IDChane +']" placeholder=" Question">'+
  '<input type="text" id="quizAnswer['+ IDChane +']['+ IDChane +']" name="quizAnswer['+ IDChane +']['+ IDChane +']" placeholder=" First Answer">'+
  '<input type="text" id="quizAnswer['+ IDChane +']['+ IDChane + 1 +']" name="quizAnswer['+ IDChane +']['+ IDChane + 1 +']" placeholder=" Second Answer">'+
  '<input type="text" id="quizAnswer['+ IDChane +']['+ IDChane + 2 +']" name="quizAnswer['+ IDChane +']['+ IDChane + 2 +']" placeholder=" Third Answer">'+
  '<input type="text" id="quizAnswer['+ IDChane +']['+ IDChane + 3 +']" name="quizAnswer['+ IDChane +']['+ IDChane + 3 +']" placeholder=" Fourth Answer">'+
'</div>';
  $('body').append(html);
}

并像

一样使用它

$(document).ready(function(){
        NewQuestion(3);
});

Working Demo

Answer 3

你真的需要所有这些身份证吗？使用name属性应该足够了。你可以使用jQuery的强大功能;在按钮或其他元素上侦听单击事件，然后克隆第一个元素，计算现有问题并确定新的问题ID，然后添加新问题。

＆＃13;

$(function() {
    $('.add-question').on('click', function() {
        var q = $('.quiz > .questions'),
            n = q.length + 1,
            c = q.first().clone();
        c.attr('id', function() {
            return this.id.replace(/\d+/, n);
        })
        .find('[id]').attr('id', function() {
            return this.id.replace(/\d+/, n);
        })
        .attr('name', function() {
            return this.name.replace(/\d+/, n);
        })
        .end()
        .appendTo('.quiz');
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="quiz">
<div id="question[1]" class="questions">
  <p> Question: </p>
  <input type="text" id="quizQuestion[1]" name="quizQuestion[1]" placeholder=" Question">
  <input type="text" id="quizAnswer[1][1]" name="quizAnswer[1][1]" placeholder=" First Answer">
  <input type="text" id="quizAnswer[1][2]" name="quizAnswer[1][2]" placeholder=" Second Answer">
  <input type="text" id="quizAnswer[1][3]" name="quizAnswer[1][3]" placeholder=" Third Answer">
  <input type="text" id="quizAnswer[1][4]" name="quizAnswer[1][4]" placeholder=" Fourth Answer">
</div>
</div>
<button class="add-question">Add Question</button>

＆＃13;

在jQuery中克隆和增加Id

3 个答案: