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
$(".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.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>
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.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>
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);
}
Related
I am trying to get prices from a site and find the cheapest one by matching them.
I wrote a script that will click the buttons so I`ll see all the prices and pick them. What should I do next?
Here`s my code:
var rooms = document.querySelectorAll(" .btn-a-offers");
console.log(rooms);
for (var room=0;room<rooms.length;room++){
rooms[room].click();
}
var prices = document.querySelectorAll(" .li-right-side>strong");
console.log(price);
for(var price=0; price<price.length;price++){
}
Also I need to get only price, without currency symbol
how is it possible to get price out from that tag?
Try innerHTML or innerText:
document.querySelector("#offer2 .pri_room_rates strong").innerHTML
var prices = [];
document.querySelectorAll(".pri_room_rates strong").forEach(function(price) {
prices.push(parseFloat(price.innerHTML.replace(/[^0-9.]/g,"")))
})
console.log(
Math.min(...prices).toFixed(2) // the lowest found
)
<div id="offer1">
<ul>
<li>
<div class="pri_room_rates">
<div></div>
<div><strong>£200.00</strong></div>
</li>
</ul>
<div>
<div id="offer2">
<ul>
<li>
<div class="pri_room_rates">
<div></div>
<div><strong>£300.00</strong></div>
</li>
</ul>
<div>
<div id="offer3">
<ul>
<li>
<div class="pri_room_rates">
<div></div>
<div><strong>£100.00</strong></div>
</li>
</ul>
<div>
use innerText of the Elements :
var prices = document.querySelectorAll(" .li-right-side>strong");
console.log(price);
for(var price=0; price<price.length;price++){
console.log(prices[price].innerText);
}
Hello I have a UL and LI it working with function click but if get the title it not work.
Exemple:
// it work but not get title
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = ///??? how to get title h2 selector
//alert(get_id);
console.log($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
<ul id="list">
<li id="myID">
<h2>Title</h2> First One </li>
<li id="myID2">
<h2>Title 2</h2> Two </li>
<li id="myID4">
<h3>Title 3</h3> Tree </li>
</ul>
You need to select the h2 element then get the text using text() like :
var get_title = $(this).find('h2').text();
As #ParthShah suggested you could use a global class like title_content on your title elements, so you could target it easily using class selector :
var get_title = $(this).find('.title_content').text();
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(this).find('.title_content').text();
console.log(get_id + ' - ' + get_title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li id="myID"><h2 class="title_content">Title</h2> First One </li>
<li id="myID2"><h2 class="title_content">Title 2</h2> Two </li>
<li id="myID4"><h3 class="title_content">Title 3</h3> Tree </li>
</ul>
Use :header. No need to worry for any h1,h2,h3... tag.
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(this).find(":header").text();
console.log(get_title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li id="myID">
<h2>Title</h2> First One </li>
<li id="myID2">
<h2>Title 2</h2> Two </li>
<li id="myID4">
<h3>Title 3</h3> Tree </li>
</ul>
</div>
use jQuery's find to query within your element.
var get_title = $(this).find("h2,h3").text() //add h4,h5 etc if you need to find those too.
https://jsfiddle.net/povu503s/
$(this).children().html();
Will take the first child and grab the HTML inside
The title is a children of your targeted li. Use the .children() function to target that heading.
Hope this helps :>
// it work but not get title
$("#list li").on('click',function(){
var get_id = $(this).attr('id');
var get_title = $(this).children().text();
alert(get_title)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list" >
<li id="myID" > <h2>Title</h2> First One </li>
<li id="myID2" > <h2>Title 2</h2> Two </li>
<li id="myID4" > <h3>Title 3</h3> Tree </li>
</ul>
give class like "title_content" to your h2 and h3 tag and then fetch title by class name.
$("#list li").on('click', function() {
var get_id = $(this).attr('id');
var get_title = $(".title_content", this).text();
console.log(get_id + ' - ' + get_title);
});
Please Refer below Fiddle..
Fiddle
You can use any of below
1. var get_title = $(this).find(':header').text();
2. var get_title = $(this).children().text();
I'm a total newbie to JS/jQuery, so please, be gentle with me :).
Here is the problem i encounter on jsfiddler.net :
http://jsfiddle.net/_Arn__/n3oakxhd/2/
I have several identical forms on the same page, which sharing the same classes and the same structure, but with different numerical values.
I've make a little script to do the math (a simple addition), but when i run the script, only the values of the first form are calculated, and results displayed on other forms are the one from the first one.
Is it possible to keep the same structure and to have specific results displayed for each form ?
$( 'form' ).each(function(){
var ligne_somme_1 = parseFloat($( ".ligne_somme_1" ).text());
var ligne_somme_2 = parseFloat($( ".ligne_somme_2" ).text());
var ligne_somme_3 = parseFloat($( ".ligne_somme_3" ).text());
var total= ligne_somme_1 + ligne_somme_2 + ligne_somme_3 ;
var afficheTotal = $( ".ligne_somme_4" );
$( afficheTotal ).text( total) ;
});
<form class="Aform">
<li class="total_ligne_01 lignes">
<div class="ligne_somme_1 lignes_somme">5$</div>
</li>
<li class="total_ligne_01b lignes">
+ <div class="ligne_somme_2 lignes_somme">5$</div>
</li>
<li class="total_ligne_03 lignes">
+ <div class="ligne_somme_3 lignes_somme">5.5$</div> =
</li>
<li class="total_ligne_04 lignes">
<div class="ligne_somme_4 lignes_somme"></div>
</li>
</form>
<hr />
<form class="Aform">
<li class="total_ligne_01 lignes">
<div class="ligne_somme_1 lignes_somme">10$</div>
</li>
<li class="total_ligne_01b lignes">
+ <div class="ligne_somme_2 lignes_somme">10$</div>
</li>
<li class="total_ligne_03 lignes">
+ <div class="ligne_somme_3 lignes_somme">10$</div> =
</li>
<li class="total_ligne_04 lignes">
<div class="ligne_somme_4 lignes_somme"></div>
</li>
</form>
Thank you for reading.
Arn
You should use $(this) reference inside each to reference current form:
$('form').each(function() {
var $this = $(this); // Caching
var ligne_somme_1 = parseFloat($this.find(".ligne_somme_1").text());
var ligne_somme_2 = parseFloat($this.find(".ligne_somme_2").text());
var ligne_somme_3 = parseFloat($this.find(".ligne_somme_3").text());
var total = ligne_somme_1 + ligne_somme_2 + ligne_somme_3;
$this.find(".ligne_somme_4").text(total);
});
Demo: https://jsfiddle.net/tusharj/n3oakxhd/3/
Thanks to #plalx:
$('form').each(function() {
var $lines = $(this).find('.lignes_somme'),
total = 0;
$lines.filter(':not(:last)').each(function() {
total += parseFloat(this.textContent);
});
$lines.last().html(total);
});
Demo: https://jsfiddle.net/tusharj/n3oakxhd/4/
I have this HTML:
<ul class="parent">
<ul>
<li>
<ul></ul>
</li>
<li>
<ul>
<li>
<ul></ul>
</li>
</ul>
</li>
</ul>
</ul>
I need to add count classes for all nested lists in this markup, to reach this:
<ul class="parent">
<ul class="level-1">
<li>
<ul class="level-2"></ul>
</li>
<li>
<ul class="level-2">
<li>
<ul class="level-3"></ul>
</li>
</ul>
</li>
</ul>
<ul class="level-1">
<li>
<ul class="level-2"></ul>
</li>
<li>
<ul class="level-2">
<li>
<ul class="level-3"></ul>
</li>
</ul>
</li>
</ul>
</ul>
So i do this:
var parent_ul = $('.parent');
if (parent_ul.doesExist()){
var parent_ul_lists = parent_ul.find('ul');
parent_ul_lists.each(function(){
var i;
for (i = 0; i < parent_ul_lists.length; i++) {
$(this).eq(i).addClass('level-' + i);
}
})
}
But in output i have class test level-1 for all of parent list childrens. Can anybody help?
Try this
$('.parent ul').addClass(function(){
return "level-"+$(this).parents('ul').length;
});
DEMO
Try this
var parent = $('.parent').children();
next = parent;
var i = 0;
while (next.length) {
parent = next;
parent.addClass("Level_" + i);
i++;
next = next.children();
}
Demo
You need some good 'ole recursion!
Check out this JSFiddle UPDATE: corrected jsFiddle link
Here is the code:
function labelChildUL(element, count) {
element.children().each(function (index, value) {
var $me = $(value);
if ($me.is("ul")) {
$me.addClass("level-" + (count + 1));
labelChildUL($me, count + 1);
}
else
{
labelChildUL($me, count);
}
});
}
$(document).ready(function () {
var $parent = $('#parent');
labelChildUL($parent, 0);
});
I also updated your html to use id instead of class for "parent":
<ul id='parent'>
...
You can use this;
var parent_ul = $('.parent');
var parent_ul_lists = parent_ul.find('ul');
parent_ul_lists.each(function(){
$(this).addClass('level-'+ ($(this).parents().length -1)/2);
});
See working demo here: http://jsfiddle.net/huseyinbabal/qmGcC/
Note: Inspect element in output to see class assigned
I have unknown number of divs with increasing ID's:
<div id="source-1" data-grab="someURL"/>Content</div>
<div id="source-2" data-grab="anotherURL"/>Content</div>
<div id="source-3" data-grab="anddifferentURL"/>Content</div>
<div id="source-4" data-grab="andthelastoneURL"/>Content</div>
And I have another list:
<ul>
<li id="target-1" class="target"> </li>
<li id="target-2" class="target"> </li>
<li id="target-3" class="target"> </li>
<li id="target-4" class="target"> </li>
</ul>
Now, what I want to achive is grabbing data-grab URL from source-1 and append it to target-1 as a image and so forth. So finally the output list will look just like:
<ul>
<li id="target-1"><img src="someURL" /> </li>
<li id="target-2"><img src="anotherURL" /> </li>
<li id="target-3"><img src="anddifferentURL" /> </li>
<li id="target-4"><img src="andthelastoneURL" /> </li>
</ul>
I'm grabbing all the data from the first list, but I'm not sure how to append right source element to right target element?
$(document).ready(function(){
$('.target').each(function(){
var URL = jQuery(this).data('grab');
});
});
$(document).ready(function(){
$('.target').each(function(){
var $this = $(this);
var divID = "source-" + ($this.id()).split("-")[1];
$("a", $this).append('<img src="' + $(divID).data("grab") + '" />');
});
});
You can use indices to select the right elements, if you add a class to your source elements (like .source):
$(document).ready(function(){
var targets = $( '.target' );
$('.source').each(function(index, value){
$(target[index]).children("a").first().append($("<img src=" + value.data('grab') + " />"));
});
});