Javascript 获取jquery生成的多个输入字段的值

我正忙着制作一个可克隆的表单

我现在被卡住了，我有13个输入字段，其中一个值是id，我可以克隆它，它将组的类更新为“group1”、“group2”等。我需要得到第一组输入字段的值，然后是第二组等

以下是js小提琴：

下面是jQuery：

//Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependants = "dependant"+d_counter++;
var group;
var current_group = jQuery(document.activeElement);
//Clone Tracking
//General Variables

//General Variables
//Generate variables
var id_fields       =   [0,1,2,3,4,5,6,7,8,9,10,12,13];
var passport_fields =   [0,1,2,3,4,5,6,7,8,9,10,12,13];
var cell_fields     =   [0,1,2,3,4,5,6,7,8,9,10];

var id_input = "<input class='id' id="+'"'+"group"+g_counter+++'"'+" "+" maxlength='1' />";
//Generate variables

jQuery(document).ready(function(e) {
//populate jquery generated fields
jQuery(id_fields).each(function() {
    jQuery(id_input).appendTo('#id_field');
});
//populate jquery generated fields
//Cloning Function
jQuery('#clone').click(function(){
    clone_dependant();
});

function clone_dependant(){
    g_counter++;
    var clonedObj=jQuery('#id_field').clone().insertAfter("#id_field");
        clonedObj.find('.id').each(function(){
             $(this).prop('id', 'group'+g_counter).val(''); // chain the commands
    });
};
//Cloning Function
//Validation
function validate_gen(){};
function validate_Id(current_group){
    console.log(current_group);
};
function validate_Pass(){};
function validate_Email(){};
function validate_Cell(){};
//Validation
//Multiple Inputs function
$(document).on('keydown', 'input.id', function(e){
    if(e.keyCode == 8){
        $(this).val('');
        $(this).prev().val('');
        $(this).prev().focus();
         //Validate(current);
    }
});  

$(document).on('keyup', 'input.id', function(){
    var current_group = this.id;
    if (this.value.match(/\d+/)) {
        var $this = $(this);
        if ($this.next('input').length) {
          $this.next().focus();
        } else {
          validate_Id(current_group);
        }  
    }
});
//Multiple Inputs function

});

//克隆跟踪
var g_计数器=1；
var d_计数器=1；
var dependents=“dependent”+d_计数器++；
var组；
var current_group=jQuery（document.activeElement）；
//克隆跟踪
//一般变量
//一般变量
//生成变量
变量id_字段=[0,1,2,3,4,5,6,7,8,9,10,12,13]；
var passport_字段=[0,1,2,3,4,5,6,7,8,9,10,12,13]；
var cell_字段=[0,1,2,3,4,5,6,7,8,9,10]；
var id_input=“”；
//生成变量
jQuery（文档）.ready（函数（e）{
//填充jquery生成的字段
jQuery（id\u字段）.each（函数（）{
jQuery（id_输入）.appendTo（'#id_字段'）；
});
//填充jquery生成的字段
//克隆功能
jQuery（“#克隆”）。单击（函数（）{
克隆依赖性（）；
});
函数克隆依赖项（）{
g_计数器++；
var clonedObj=jQuery（“#id_字段”）.clone（）.insertAfter（“#id_字段”）；
clonedObj.find（'.id'）.each（函数（）{
$（this.prop（'id'，'group'+g_counter）.val（''）；//链接命令
});
};
//克隆功能
//验证
函数validate_gen（）{}；
函数验证\u Id（当前\u组）{
console.log（当前_组）；
};
函数validate_Pass（）{}；
函数validate_Email（）{}；
函数validate_Cell（）{}；
//验证
//多输入函数
$（文档）.on（'keydown'，'input.id'，函数（e）{
如果（e.keyCode==8）{
$（this.val（“”）；
$（this.prev（）.val（“”）；
$（this.prev（）.focus（）；
//验证（当前）；
}
});  
$（document）.on（'keyup'，'input.id'，function（）{
var current_group=this.id；
if（this.value.match（/\d+/））{
var$this=$（this）；
if（$this.next（'input'）.length）{
$this.next（）.focus（）；
}否则{
验证\u Id（当前\u组）；
}  
}
});
//多输入函数
});

还有html

<div id="id_field"></div>
<button id="clone">clone</button>

克隆

---

非常感谢您提供的任何帮助：）

您的代码的问题是，对于组中的所有

输入，您的id都是相同的。这将在提取then值时将其弄糟

如果您完全避免输入的
id，并为将它们作为一个整体封装起来的div指定一个唯一的id，则效果会更好<代码>（可能是第1组、第2组……）

这样做应该会有帮助

//Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependants = "dependant" + d_counter++;
var group;
var current_group = jQuery(document.activeElement);
//Clone Tracking
//General Variables
var input_groups = ["group-1"];
//General Variables
//Generate variables
var id_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13];
var passport_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13];
var cell_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var id_input = "<input class='id' maxlength='1' />";
//Generate variables
jQuery(document).ready(function(e) {
    //populate jquery generated fields
    jQuery(id_fields).each(function() {
        jQuery(id_input).appendTo('#group-1');
    });
    //populate jquery generated fields
    //Cloning Function
    jQuery('#clone').click(function() {
        clone_dependant();
    });

    function clone_dependant() {
        var clonedObj = jQuery('#group-1')
                              .clone().insertAfter("#group-" + g_counter);
        g_counter++;
        var newDivId = 'group-'+ g_counter;
        clonedObj.prop('id' ,newDivId ).find('input').each(function() {
            this.value = ''; // chain the commands
        });
        input_groups.push(newDivId);
    };
    //Cloning Function
    //Validation


    function validate_gen() {};

    function validate_Id(current_group) {
       // console.log(current_group);
    };

    function validate_Pass() {};

    function validate_Email() {};

    function validate_Cell() {};
    //Validation
    //Multiple Inputs function
    $(document).on('keydown', 'input.id', function(e) {
        if (e.keyCode == 8) {
            $(this).val('');
            $(this).prev().val('');
            $(this).prev().focus();
            //Validate(current);
        }
    });

    $(document).on('keyup', 'input.id', function() {
        var current_group = this.id;
        if (this.value.match(/\d+/)) {
            var $this = $(this);
            if ($this.next('input').length) {
                $this.next().focus();
            } else {
                validate_Id(current_group);
            }
        }
    });

    $('#getvalues').on('click', function(){
        $.each(input_groups , function(i){
            var id = input_groups[i];
            var values = $.map($('#'+id + ' input') , function(e,i){
                return $(e).val();
            }).join(' :: ');

            console.log('The values inside ' + id + ' : are ' + values);
        });            
    });
    //Multiple Inputs function
});​

ID
应该是唯一的，使用
class
来代替。安静一些，试着用group1类创建一个每个函数来获取所有输入，我的意思是相信我。。堆栈溢出是我最后的手段，除非我真的被卡住了，否则我不会在这里问任何问题。我有一个页面，在那里我做了很多元素/输入的克隆等。我使用了克隆元素组的父元素的索引（我将我的元素包装在一个div中并克隆了div）-所有这些都使用了一个类。也许这是一个比尝试生成id更好的解决方案？请注意，您可以通过索引访问它们。正如我所写的一样，无效的HTML使jQuery很伤心：-（我非常感谢您，这已经让人头疼了一段时间了..非常感谢您…非常感谢我的建议：）+1我一直在尝试在div中插入组1，id为“dependent-1”，与组2相同，以“dependent-2”等，有什么建议吗？因为当你添加一个以上的可克隆字段时，它会变得有点混乱，为什么你不克隆整个
dependent
div，而不是克隆每个div并尝试包装它们呢
function clone_dependant() {
        // Store the value of the previous Id to insert the cloned div..
        var oldId = g_counter;
        g_counter++;

        // Clone the Dependant Div and set a new id
        var $clonedDiv = jQuery('#dependant-1').clone(false)
                                           .attr('id', 'dependant-'+g_counter);
        var cell_newDiv = 'cell-group-'+ g_counter;
        var age_newDiv = 'age-group-'+ g_counter;
        var pass_newDiv = 'pass-group-'+ g_counter;
        var id_newDiv = 'group-'+ g_counter;

        // Find div's inside the cloned object and set a new id's
        $clonedDiv.find('#group-1').attr('id',"#group-" + g_counter );
        $clonedDiv.find('#age-group-1').attr('id',"#age-group-" + g_counter );
        $clonedDiv.find('#cell-group-1').attr('id',"#cell-group-" + g_counter );
        $clonedDiv.find('#pass-group-1').attr('id',"#pass-group-" + g_counter );

        // You don't need to Loop thru the inputs to set the value
        $clonedDiv.find('input').val('');

        // Insert the cloned object 
        $clonedDiv.insertAfter("#dependant-" + oldId);

        cell_input_groups.push(cell_newDiv);
        age_input_groups.push(age_newDiv);
        pass_input_groups.push(pass_newDiv);
        input_groups.push(id_newDiv);
    };