jQuery 克隆后更改 div 的子元素的所有名称

Question

所以，我有以下 jquery 代码，当某个字段中的输入值增加时，它会克隆一个元素。

$(document).ready(function(){
    $("#nmovimentos").change(function () {
        var direction = this.defaultValue < this.value
        this.defaultValue = this.value;
        if (direction)
        {
                var $div = $('div[id^="novomov"]:last');
                var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
                var $clone = $div.clone().prop('id', 'novomov'+ num)
                $clone.insertAfter('[id^="novomov"]:last');
        }
        else $('[id^="novomov"]:last').remove();
    });
});

但是，它克隆了一个 div，其中包含具有大量输入字段的部分表单。

<div id="novomov1" class="novomov">
<table id="tab">
<tr name="linear1" id="linear1">
        <td>
            Cardinalidade:<input type="text" name="card1" id="card1" value=""><br>
            Angulo 1:<input type="text" name="param1" id="angulo1" value=""><br>
            Angulo 2:<input type="text" name="param2" id="angulo2" value=""><br>
            Tamanho:<input type="text" name="param3" id="tamanho1" value=""><br>
            Descricao:<input type="text" name="descricao1" id="descricao1" value=""><br>
            Tempo:<input type="text" name="tempo1" id="tempo1" value=""><br>
        </td></tr></table></div>

我需要更改所有克隆的 div 后代的名称，以便将这些参数传递到数据库。我想在 jquery 函数中使用 var num 将名称递增 1。但是我有点迷路.. 那么，关于如何做到这一点的任何线索？非常感谢！

Answer 1

您应该使用数据属性，而不是解析元素的 ID 来获取数字。此外，由于您使用的是 jQuery，因此您可以使用 .last() 来获取具有该 ID 的最后一个元素。希望这有帮助。

     $('#nmovimentos').on('change', function () {
        var direction = this.defaultValue < this.value,
            $last = $('#novomov').last(),
            $clone,
            num;

        this.defaultValue = this.value;

        if (direction) {
            // add id in a data attribute instead of parsing the id
            num = parseInt($last.data('id'), 10) + 1;

            // set clone id data attribute to have the latest number
            $clone = $last.clone().data('id', num);

            // add clone after the last div
            $last.after($clone);
        } else {
            $last.remove();  
        }
    });

Answer 2

代码更改为检索克隆 div 内的所有输入并更改其 name/id。

<script>    
    $(document).ready(function(){
            $("#nmovimentos").change(function () {
                var direction = this.defaultValue < this.value
                this.defaultValue = this.value;
                if (direction)
                {
                        var $div = $('div[id^="novomov"]:last');
                        var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
                        var $clone = $div.clone().prop('id', 'novomov'+ num)
                        $clone.insertAfter('[id^="novomov"]:last');
                        // get all the inputs inside the clone
                        var inputs = $clone.find('input');
                        // for each input change its name/id appending the num value
                        $.each(inputs, function(index, elem){
                            var jElem = $(elem); // jQuery element
                            var name = jElem.prop('name');
                            // remove the number
                            name = name.replace(/\d+/g, '');
                            name += num;
                            jElem.prop('id', name);
                            jElem.prop('name', name);
                        });
                }
                else $('[id^="novomov"]:last').remove();
            });
        });
    </script>

jQuery 克隆后更改 div 的子元素的所有名称

jQuery Change all names of div's children elements after clone

javascript

jquery

clone