如何使用jQuery从html元素中选择电话号码和联系人

How to select phone number and contact from html element using jQuery?

本文关键字：选择 电话号码 联系人 元素 何使用 jQuery html      更新时间：2023-09-26

我想从html表单中选择电话号码和联系人姓名，但无法用我的代码选择。我不知道怎么了？

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

这是我的代码

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

如何选择所有电话号码和联系人姓名？感谢advace

$(".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);

为您创建了这个小提琴

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

或者只是

$('.contact-list li ').each(function (i,elem){
   contact.push( $.trim( $( this ).clone().children().remove().end().text() );
 });

我认为这对你来说很好。

  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.com/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>

您可以很容易地将span或div添加到名称中，并将它们提取到对象中，稍后将其添加到数组中。请参阅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.com/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>

您还可能需要onload函数或ondocumentready，以便您的代码在页面加载后立即运行，或者当您执行某些操作时，它将被触发。

您也应该将这些名称包含在一个单独的选项卡中。类似这样的东西：

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

然后，您可以使用jQuery轻松获取姓名和电话。

这应该可以工作，这里有一个演示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);
}
相关文章：