javascript - 最后一个子项不在 div 迭代内工作

Question

在浏览器中，HTML 是动态生成的并呈现为

        <div id="dynamic-relationship-details">

        <div id="count-status0" class="relationship-container form-group">
              <div class="col-sm-1"></div>
                  <div class="col-sm-2">
                       <select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
                      </div>
                      <div class="col-sm-3">
                        <input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
           </div>
               <button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
           </div><div id="count-status1" class="relationship-container form-group">
          <div class="col-sm-1"></div>
          <div class="col-sm-2">
             <select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
          </div>
        <div class="col-sm-3">
              <input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
       </div>
         <button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
     </div>
     </div>

代码是

       // Relationship details Array
          $(".relationship-container").each(function(i, obj) {
                 var $this = $(this);
                 $this.find("select").each(function() {

                        var relationshipTypeValue = $(this).val();
                        var relationshipName =$this.find("input[type=text]:first-child").val();
                        var relationshipContactNumber =$this.find("input[type=text]:last-child").val();

                        var innerRelationshipArray = {};
                             innerRelationshipArray = {
                              relationshipTypeValue: relationshipTypeValue,
                              relationshipName: relationshipName,
                              relationshipContactNumber: relationshipContactNumber
                             };

                        relationship_details_array.push(innerRelationshipArray);

                      });
              });

我正在尝试获取联系人号码的值，即“

”行中的 id 关系类型联系人(n) 值

var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"

这是在循环中获取变量relationshipContactNumber 中第一个子文本框的值。

请帮忙!!!

Answer 1

这应该有效，使用 .first() 和 .last() 选择器。

如果您有权更改 HTML，另一种方法是为输入字段添加类名称，然后使用它来选择它们。

function getData() {
	var relationship_details_array = [];

  // Relationship details Array
  $(".relationship-container").each(function(i, obj) {
    var $this = $(this);

    $this.find("select").each(function() {
      var relationshipTypeValue = $(this).val();
      var relationshipName = $this.find("input[type=text]").first().val();
      var relationshipContactNumber = $this.find("input[type=text]").last().val();

      var innerRelationshipArray = {};
      innerRelationshipArray = {
        relationshipTypeValue: relationshipTypeValue,
        relationshipName: relationshipName,
        relationshipContactNumber: relationshipContactNumber
      };

      relationship_details_array.push(innerRelationshipArray);

    });
  });

  console.log(relationship_details_array);
}

$("#getData").on("click", getData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
 <div id="dynamic-relationship-details">
   <div id="count-status0" class="relationship-container form-group">
     <div class="col-sm-1"></div>
     <div class="col-sm-2">
       <select id="relationship-type0" class="form-control">
         <option value="">Select Relationship</option>
         <option value="Father">Father</option>
         <option value="Mother" selected>Mother</option>
         <option value="Brother">Brother</option>
         <option value="Sister">Sister</option>
         <option value="Spouse">Spouse</option>
         <option value="Guardian">Guardian</option>
       </select>
     </div>
     <div class="col-sm-3">
       <input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
     </div>
     <div class="col-sm-2">
       <input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
     </div>
   </div>
   <div id="count-status1" class="relationship-container form-group">
     <div class="col-sm-1"></div>
     <div class="col-sm-2">
       <select id="relationship-type1" class="form-control">
         <option value="">Select Relationship</option>
         <option value="Father" selected>Father</option>
         <option value="Mother">Mother</option>
         <option value="Brother">Brother</option>
         <option value="Sister">Sister</option>
         <option value="Spouse">Spouse</option>
         <option value="Guardian">Guardian</option>
       </select>
     </div>
     <div class="col-sm-3">
       <input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
     </div>
     <div class="col-sm-2">
       <input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
     </div>
   </div>
</div>