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

Question

我有动态生成的 html，它像浏览器一样呈现

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>

它在 addressLine1、addressLine2、city 中显示未定义的值。请帮助我从上面动态生成的 html 中获取它们的值。

Answer 1

使用find代替filter，使用eq代替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();

演示

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>