Last-child not working inside iteration of div

Question

In browser, the HTML is generated dynamically and is rendered as

The code is

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

                      });
              });

I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "

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

This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.

Please help !!!

KungWaz · Accepted Answer

This should work, use the .first() and .last() selectors.

Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.

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

Last-child not working inside iteration of div

Answers (1)

Related Questions