JQuery 克隆 div，搜索特定 id 并递增它们

Question

我正在尝试克隆一个包含多个输入的表单内的 div。
这是我的 html:

<div>
    <input type="hidden" name="sf_action" value="INSERT" />
    <input type="text" name="sf_anzahl[2]" value="" placeholder="Anz." class="w50x TxtCenter" />
    <input type="text" name="sf_hoehe[2]" value="" placeholder="Höhe" class="w100x BorderLeft TxtCenter" />
    <input type="text" name="sf_breite[2]" value="" placeholder="Breite" class="w100x TxtCenter BorderLeft" />
    <select name="sf_art[2]" class="w150x BorderLeft">
    <option value="0">Automatiktür</option>
    <option value="1">Bürofenster</option>
    <option value="2">Shopfenster</option>
    <option value="3">Oberlichter</option>
    </select>&emsp;
    <input type="checkbox" name="sf_rsi[2]" value="1" /> R-SI&emsp;
    <input type="checkbox" name="sf_rssf[2]" value="1" /> R-SSF&emsp;
    <input type="checkbox" name="sf_rspf[2]" value="1" /> R-SPF&emsp;
    <input type="checkbox" name="sf_ssf[2]" value="1" /> SSF&emsp;
    <input type="checkbox" name="sf_upm[2]" value="1" /> UPM&emsp;
    <input type="checkbox" name="sf_ebm[2]" value="1" /> EBM&emsp;
</div>
<input type="button" class="add1" value="+" />

和我的jquery:

$(".add1").on("click", function() 
{
    var eingabe = $(this).prev("div").clone();
    eingabe.find("input[type='text']").val("");
    eingabe.find("input[type='checkbox']").prop("checked", false);
    var idar = $("input:nth-child(2n)", eingabe).attr("name").match(/\[(.*)\]/);
    var ausgabe = eingabe.prop('outerHTML');
    var id = parseInt(idar[1]);
    var ausgabeX = $(ausgabe).text().replace(/\[(.*)\]/, ++id);
    $(ausgabeX).insertBefore(this);
});

在“单击”时，我想克隆整个 div 并添加它(在按钮之前，最后一个 div 之后)。

克隆本身工作得很好，但现在我想获取括号 [] 之间的 id，递增它并在所有名称属性中的新 div 中替换它。

我可以获取 id 并递增它，但不知道如何在新输入中替换它。

我已经从数据库中获取了一些div，因此id并不总是[0]，例如[1]-[4]可以已经存在。特别是对于这种情况，我需要增加括号中的数字。空括号不起作用。

Answer 1

为了选择属性名称为 [number] 之类的值的所有元素，您可以使用:

eingabe.find('[name*="["]')

为了将此数字加一，您可以:

eingabe.find('[name*="["]').attr('name', function (index, attr) {
    return attr.replace(/^(.*\[)(\d)(\])$/, function () {
        return arguments[1] + (parseInt(arguments[2]) + 1) + arguments[3];
    });
});

详情请参阅:

• attribute-contains-selector :选择具有指定属性且其值包含给定子字符串的元素。
• .attr( attributeName, function ) :返回要设置的值的函数。这是当前元素。接收集合中元素的索引位置和旧属性值作为参数。
• String.prototype.replace() : str.replace(正则表达式, 函数)

代码片段:

$(".add1").on("click", function (e) {
  var eingabe = $(this).prev("div").clone();
  eingabe.find("input[type='text']").val("");
  eingabe.find("input[type='checkbox']").prop("checked", false);
  eingabe.find('[name*="["]').attr('name', function (index, attr) {
    return attr.replace(/^(.*\[)(\d)(\])$/, function () {
      return arguments[1] + (parseInt(arguments[2]) + 1) + arguments[3];
    });
  });
  $(eingabe).insertBefore(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
    <input type="hidden" name="sf_action" value="INSERT"/>
    <input type="text" name="sf_anzahl[0]" value="" placeholder="Anz." class="w50x TxtCenter"/>
    <input type="text" name="sf_hoehe[0]" value="" placeholder="Höhe" class="w100x BorderLeft TxtCenter"/>
    <input type="text" name="sf_breite[0]" value="" placeholder="Breite" class="w100x TxtCenter BorderLeft"/>
    <select name="sf_art[0]" class="w150x BorderLeft">
        <option value="0">Automatiktür</option>
        <option value="1">Bürofenster</option>
        <option value="2">Shopfenster</option>
        <option value="3">Oberlichter</option>
    </select>&emsp;
    <input type="checkbox" name="sf_rsi[0]" value="1"/> R-SI&emsp;
    <input type="checkbox" name="sf_rssf[0]" value="1"/> R-SSF&emsp;
    <input type="checkbox" name="sf_rspf[0]" value="1"/> R-SPF&emsp;
    <input type="checkbox" name="sf_ssf[0]" value="1"/> SSF&emsp;
    <input type="checkbox" name="sf_upm[0]" value="1"/> UPM&emsp;
    <input type="checkbox" name="sf_ebm[0]" value="1"/> EBM&emsp;
</div>
<input type="button" class="add1" value="+"/>