爲由按鈕創建的每個新行添加i ++

Question

我嘗試使用PHP和Javascript製作一些可重複的字段。這工作正常，但保存後（爲WordPress創建插件）後，克隆的行將覆蓋最新的一個。這是因爲我沒有爲每一行使用唯一的ID。

我想用javascript添加一個'id'屬性，我希望每一行都創建id 1增加。我已經對PHP做了類似的事情，但發現這不是我想要的，我認爲，我更喜歡javascript，因爲當我用「添加新」按鈕克隆字段時，金額不會隨着增加+1;

這裏是PHP代碼，我用了：

$count = 2; 
for ($i = 0; $i < $count; $i++) { 

    // Begin a table row 
    echo '<tr class="row" id="' . '['.$i.']' . '-repeatable">'; 
    echo '<td class="order">' . '['.$i.']' . '</td>'; 

      // Do cool stuff inside the row 

    echo '<td class="remove"><a class="repeatable-remove button" href="#">-</a></td>'; 
    echo '</tr>'; // End .row 

} // End for loop 

<a href"#" class="button">Add new row</a> 

的重複領域

JS代碼：

// Add repeatable row 
jQuery('.repeatable-add').click(function() { 
    // Clone row 
    var row = jQuery(this).closest('.ui-sortable').find('tbody tr.row:last-child'); 
    var clone = row.clone(); 

    clone.find('input[type=text], text, textarea, select, input.upload_image').val(''); // Reset the values 
    clone.find('.preview_image').attr('src', ''); // Reset the values 

    row.after(clone); 

    // 
    return false; 
}); 

我想我必須做這樣的事情摘錄行的：

clone.find('tr.row').attr('id', 'repeatable-' + addInteger); 

但是我如何在Jquery/Javascript裏面加+1，就像我在PHP中的例子？

Answer 1

你想要做的就是查看你正在克隆的行的ID並使用該ID爲新行賦予正確的索引值。我在示例中添加了兩行代碼，其中一行定義了一個名爲clonedIdIndex的新變量，另一行使用該變量中的值爲克隆行定義新的ID。

jQuery('.repeatable-add').click(function() { 
    // Clone row 
    var row = jQuery(this).closest('.ui-sortable').find('tbody tr.row:last-child'), 
     clone = row.clone(), 
     clonedIdIndex = parseInt(clone.find('tr.row').attr('id').split('-')[1], 10); 

    clone.find('input[type=text], text, textarea, select, input.upload_image').val('');  
    clone.find('.preview_image').attr('src', ''); // Reset the values 

    // Assign new ID 
    clone.find('tr.row').attr('id', 'repeatable-' + (++clonedIdIndex)); 

    row.after(clone); 

    // 
    return false; 
});