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

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包含具有很多输入字段的表单的一部分。

<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

更改代码以检索克隆的div内的所有输入并更改其名称/ 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>

Answer 2

与其解析元素的ID以获取数字，不如使用data属性。 另外，由于您使用的是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();  
        }
    });