I want to select phone number and contact name from html form and not able to select it with my code. I don't know what is wrong?

<ul class="contact-list">
   <li>
      <div class="phone">0128685665</div>
      (Mike Lau)
   </li>
   <li>
      <div class="phone">0242342354</div>
      (John Son)
   </li>
<li>
      <div class="phone">012343534</div>
      (Sam)
   </li>

</ul>

and here is my code

var contact=[];
            $('.contact-list').eq(0).find('li').find('.phone').each(function (i,elem){
                contact.push($(elem).text().replace(/[A-Za-z\s]+/,'').trim());
            });

            for(var i=1;i<contact.length;i++){
                    console.log(contact[i]);
                }

How can I select all phone numbers and contact names? Thanks in advace

I want to select phone number and contact name from html form and not able to select it with my code. I don't know what is wrong?

<ul class="contact-list">
   <li>
      <div class="phone">0128685665</div>
      (Mike Lau)
   </li>
   <li>
      <div class="phone">0242342354</div>
      (John Son)
   </li>
<li>
      <div class="phone">012343534</div>
      (Sam)
   </li>

</ul>

and here is my code

var contact=[];
            $('.contact-list').eq(0).find('li').find('.phone').each(function (i,elem){
                contact.push($(elem).text().replace(/[A-Za-z\s]+/,'').trim());
            });

            for(var i=1;i<contact.length;i++){
                    console.log(contact[i]);
                }

How can I select all phone numbers and contact names? Thanks in advace

• javascript
• jquery
• html

• Your for loop should be var i = 0 ;-) – Matt D. Webb Commented Dec 8, 2015 at 8:55

6 Answers 6

$(".phone").each(function(){

  var name = $(this).parent().clone().children().remove().end().text();
  var phonenumber = $(this).text();

  contact.push({name: name, phoneNumber: phonenumber});  
});

console.log(contact);

created this fiddle for you

var contact=[];
$('.contact-list li ').each(function (i,elem){

   contact.push( { 
     phone : $( this ).find('.phone').html(),
     contact : $.trim( $( this ).clone().children().remove().end().text() ),
   } );
});

            for(var i=0;i<contact.length;i++){
                    console.log(contact[i]);
                }

or simply just

$('.contact-list li ').each(function (i,elem){

   contact.push( $.trim( $( this ).clone().children().remove().end().text() );
 });

i think this is work fine for you.

  var contact=[];

            $('.contact-list li').each(function (i,item){              
                contact.push($(item).find(".phone").text().replace(/[A-Za-z\s]+/,'').trim());
            });
            for(var i=1;i<contact.length;i++){
                    alert(contact[i]);
                }

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<ul class="contact-list">
   <li>
      <div class="phone">0128685665</div>
      (Mike Lau)
   </li>
   <li>
      <div class="phone">0242342354</div>
      (John Son)
   </li>
<li>
      <div class="phone">012343534</div>
      (Sam)
   </li>

</ul>

You can easily add span or div to names and fetch them into object, later which adds into array. Please see code for html

		var contact=[];
		$('.contact-list').eq(0).find('li').each(function (key,value){
			var phone = $(value).find('.phone').text().replace(/[A-Za-z\s]+/,'').trim();
			var name  = $(value).find('.name').text().trim();
			contact.push({"name":name,"phone":phone});
		});
	
		for(var i=0;i<contact.length;i++){
			alert(("name " + contact[i].name) + " and  " + "phone " + contact[i].phone);
		}
	

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="contact-list">
   <li>
      <div class="phone">0128685665</div>
      <span class="name"> (Mike Lau)</span>
   </li>
   <li>
      <div class="phone">0242342354</div>
      <span class="name">(John Son)</span>
   </li>
<li>
      <div class="phone">012343534</div>
      <span class="name">(Sam)</span>
   </li>

</ul>

You can also will need onload function or ondocumentready so your code runs as soon as page loads, or when you perform some action it will be triggered.

You should include the names in a separate tab as well. Some thing like this:

<ul class="contact-list">
   <li>
      <div class="phone">0128685665</div>
      <div class="name">(Mike Lau)</div>
   </li>
   <li>
      <div class="phone">0242342354</div>
      <div class="name">(John Son)</div>
   </li>
<li>
      <div class="phone">012343534</div>
      <div class="name">(Sam)</div>
   </li>    
</ul>

Then you can easily fetch names and phones using jQuery.

This should work, here is a demo jsFiddle.

jQuery

// array list of contacts:
var contacts = [];

// contact class:
function contact(name, phone) {
    this.name = name,
    this.phone = phone
}

// retrieve contact info from the DOM:
$('.contact-list li ').each(function(index, element) {

  var phone = $(this).find('.phone').text();
  var name = $.trim($(this).children().remove().end().text());
  var person = new contact(name, phone);

  contacts.push(person);
});

// view all contacts in array list:
for (var i = 0; i < contacts.length; i++) {
  console.log(contacts[i].name, contacts[i].phone);
}