Question

我有动态生成的html，它们在浏览器中呈现，如

＆＃13;

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);

                      });
              });

＆＃13;

<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>

＆＃13;

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

Answer 1

nth-child不起作用，因为在任何给定的HTML元素中只有一个input，这就是为什么它始终是第一个nth-child(1)。

由于您已经为输入元素提供了ID，因此可以通过其ID引用它们，甚至可以引用名称并获取值。

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();

这很简单。

Answer 2

使用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>

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);
                  });
});

在$this.find("select").first().each(function() {之前放置上面的代码因为在select循环中不必要地执行，我相信没用。

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

3 个答案: