如何从多个div中的不同html输入标签中获取值？

Question

I have dynamically generated html which are rendered in browser like

 var address_details_array = [] // Address details Array $(".address-container").each(function(i, obj) { var $this = $(this); $this.find("select").first().each(function() { var addressTypeValue = $(this).val(); var addressLine1 =$this.filter("input[type=text]:nth-child(1)").val(); var addressLine2 = $this.filter("input[type=text]:nth-child(2)").val(); var city = $this.filter("input[type=text]:nth-child(3)").val(); var innerAddressArray = {}; innerAddressArray = { addressTypeValue: addressTypeValue, addressLine1: addressLine1, addressLine2: addressLine2, city: city }; address_details_array.push(innerAddressArray); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dynamic-address-details"> <div id="count-address0" class="address-container"><div class="form-group"> <label class="col-sm-3 control-label">Address Type</label><div class="col-sm-5"> <select name="addrees-line-one0" id="addrees-line-one0" class="form-control"><option value="Physical">Physical</option><option value="Correspondence">Correspondence</option></select></div><button value="count-address0" class="remove-address-field btn btn-danger"><i class="fa fa-trash"></i></button> </div> <div class="form-group"><label class="col-sm-3 control-label">Address Line 1</label><div class="col-sm-5"><input type="text" name="addrees-line-one0" id="addrees-line-one0" class="form-control"></div></div> <div class="form-group"><label class="col-sm-3 control-label">Address Line 2</label><div class="col-sm-5"><input type="text" name="addrees-line-two0" id="addrees-line-two0" class="form-control"></div></div> <div class="form-group"><label class="col-sm-3 control-label">City</label><div class="col-sm-5"><input type="text" name="city0" id="city0" class="form-control"></div></div> </div> <div id="count-address1" class="address-container"><div class="form-group"> <label class="col-sm-3 control-label">Address Type</label> ... ... </div> </div> 

It is showing undefined values in addressLine1, addressLine2,city. Please help me in fetching their values from above html generated dynamically.

Answer 1

nth-child wouldn't work since in any given HTML element there's only one input and that is why it is always the 1st ie nth-child(1) .

Since you already have given the IDs to the input elements you can reference them by its ID, or even name and get the values.

var addressTypeValue = $(this).val();
var addressLine1 =$this.filter("#addrees-line-one0").val();
var addressLine2 = $this.filter("#addrees-line-two0").val();
var city = $this.filter("#city0").val();

This is as simple as this.

Answer 2

Use find instead of filter and eq instead of nth-child

var addressLine1 = $this.find("input[type=text]").eq(0).val();
var addressLine2 = $this.find("input[type=text]").eq(1).val();
var city = $this.find("input[type=text]").eq(2).val();

Demo

 var address_details_array = []; $(".address-container").each(function(i, obj) { var $this = $(this); $this.find("select").first().each(function() { var addressTypeValue = $(this).val(); console.log( $this.find("input").length ); var addressLine1 = $this.find("input[type=text]").eq(0).val(); var addressLine2 = $this.find("input[type=text]").eq(1).val(); var city = $this.find("input[type=text]").eq(2).val(); var innerAddressArray = {}; innerAddressArray = { addressTypeValue: addressTypeValue, addressLine1: addressLine1, addressLine2: addressLine2, city: city }; address_details_array.push(innerAddressArray); }); }); console.log( address_details_array ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="count-address0" class="address-container"> <div class="form-group"> <label class="col-sm-3 control-label">Address Type</label> <div class="col-sm-5"> <select name="addrees-line-one0" id="addrees-line-one0" class="form-control"><option value="Physical">Physical</option><option value="Correspondence">Correspondence</option></select></div><button value="count-address0" class="remove-address-field btn btn-danger"><i class="fa fa-trash"></i></button> </div> <div class="form-group"><label class="col-sm-3 control-label">Address Line 1</label> <div class="col-sm-5"><input type="text" name="addrees-line-one0" id="addrees-line-one0" class="form-control"></div> </div> <div class="form-group"><label class="col-sm-3 control-label">Address Line 2</label> <div class="col-sm-5"><input type="text" name="addrees-line-two0" id="addrees-line-two0" class="form-control"></div> </div> <div class="form-group"><label class="col-sm-3 control-label">City</label> <div class="col-sm-5"><input type="text" name="city0" id="city0" class="form-control"></div> </div> </div> 

Answer 3

var address_details_array = []
$(".address-container").each(function(i, obj) {
    var $this = $(this); 
    var addressLine1 =$this.find("#addrees-line-one"+i).val();
    var addressLine2 = $this.find("#addrees-line-two"+i).val();
    var city = $this.find("#city"+i).val();
    $this.find("select").first().each(function() {
                    var addressTypeValue = $(this).val();
                    var innerAddressArray = {};
                          innerAddressArray = {
                          addressTypeValue: addressTypeValue,
                          addressLine1: addressLine1,
                          addressLine2: addressLine2,
                          city: city
                         };
                    address_details_array.push(innerAddressArray);
                  });
});

Put above code before $this.find("select").first().each(function() { Because is unnecessarily executing in select loop, which I believe no use.