克隆和遞增編號jQuery中

我有下面的一組克隆和遞增編號jQuery中

<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) 
}

來源

2015-12-22 user3295209

你可以使用這樣的事情

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

來源

2015-12-22 01:34:52

我想你只是在尋找一個正則表達式來解析當前正在使用的數字，是嗎？如果是這樣，那麼做這樣的事情應該工作。

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]匹配。

來源

2015-12-22 01:34:35

你真的需要所有這些ID？使用name屬性應該足夠了。你可以使用jQuery的強大功能;聽按鈕或其他元素上的點擊事件，然後克隆第一個元素，計算現有問題並確定新問題ID，然後添加新問題。

$(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'); 
 
    }); 
 
});

<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>

來源

2015-12-22 01:56:20 PeterKA

克隆和遞增編號jQuery中

回答

相關問題