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

点击＆＃34;点击＆＃34;我想克隆整个div并添加它（在按钮之前，在最后一个div之后）。

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

我可以获取id并增加它，但无法弄清楚如何在新输入中替换它。

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

Answer 1

为了选择具有属性名称的所有元素，例如 [number] ，您可以使用：

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

并且为了将此数字递增1，您可以：

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 )：将值返回到set的函数。这是当前的元素。接收集合中元素的索引位置和旧属性值作为参数。
String.prototype.replace()：str.replace（regexp，function）

摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

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

JQuery Clone div，搜索特定的id并增加它们

3 个答案: