为按钮创建的每个新行添加i ++

我尝试用PHP和Javascript制作一些可重复的字段。 这工作正常，但在保存post（为WordPress创建插件）后，克隆的行将覆盖最新的一行。 这是因为我没有为每一行使用唯一的id。

我想用javascript添加’id’属性，我希望为id 1增加创建的每一行。 我已经用PHP做了类似的事情，但发现这不是我想要的，我觉得我用javascript更好，我想，因为当我用“添加新”按钮克隆字段时，数量不会增加+1;

这是我用过的php代码：

$count = 2; for ($i = 0; $i < $count; $i++) { // Begin a table row echo ''; echo '' . '['.$i.']' . ''; // Do cool stuff inside the row echo '-'; echo ''; // End .row } // End for loop Add new row 

可重复字段的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; });