JQuery Clone 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(regexp, function)

sn-p：

$(".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="+"/>

Answer 2

您可以通过以下方式轻松设置新 ID：

$('#selector').attr('id', 'new_value');

Answer 3

标记喜欢

<div>
    <input name="somename[0]" value="" class="" />
    <input name="someothername[0]" value="" class="" />
</div>
<div>
    <input name="somename[1]" value="" class="" />
    <input name="someothername[1]" value="" class="" />
</div>

和这个是一样的：

<div>
    <input name="somename[]" value="" class="" />
    <input name="someothername[]" value="" class="" />
</div>
<div>
    <input name="somename[]" value="" class="" />
    <input name="someothername[]" value="" class="" />
</div>

所有值都将作为零索引数组传递给服务器。 因此，您可以将标记简化为：

<div>
    <input type="hidden" name="sf_action" value="INSERT" />
    <input type="text" name="sf_anzahl[]" value="" placeholder="Anz." class="w50x TxtCenter" />
    <input type="text" name="sf_hoehe[]" value="" placeholder="Höhe" class="w100x BorderLeft TxtCenter" />
    <!-- more markup -->

并且只克隆 div 而不使用和增加括号中的值：

$(".add1").on("click", function() 
{
    var eingabe = $(this).prev("div").clone();
    eingabe.find("input[type='text']").val("");
    eingabe.find("input[type='checkbox']").prop("checked", false);
    $(eingabe).insertBefore(this);
});