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

代码已更改为检索克隆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

您应该使用data属性，而不是解析元素的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();  
        }
    });

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

2 个答案: