Get value from span inside list with id - javascript

I have the following code where I want to retrieve the value of the span element inside an anchor tag, inside a list element with an id.
parseInt($('#top_cart_button.span').text(), 10);
<li id="top_cart_button">
<a href="default.asp?cmd=showCart" rel="nofollow">
<span>€ 55,00</span>
</a>
</li>
How can I do it?
Thank you

#top_cart_button.span will try to find the first element with class span that is a child of the element with id top_cart_button. You want to find the element with the tag span and not the class. To do so, remove the .. Then, to remove the extra character, you can extract only the numbers from the input using the extractDigits function below.
Here's a working example:
let InputText = $('#top_cart_button span').text();
let InputDigitsOnly = extractDigits(InputText);
function extractDigits(input) {
return input.match(/\d+/g).map(Number);
}
console.log(parseInt(InputDigitsOnly, 10));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="top_cart_button">
<a href="default.asp?cmd=showCart" rel="nofollow">
<span>€ 55,00</span>
</a>
</li>
EDIT:
var prezzo = parseInt($('.mainPriceAmount').text().split(",")[0], 10);
var InputText = $('#top_cart_button span').text().split(",")[0];
var InputDigitsOnly = extractDigits(InputText);
function extractDigits(input) {
return input.match(/\d+/g).map(Number);
}
var carrello = parseInt(InputDigitsOnly, 10);
var somma = prezzo + carrello;
var customLink = '<img alt="Hello" src="https://ps.w.org/click-fraud-check/assets/icon-128x128.png?rev=2160665"/>';
if (prezzo >= 199 || somma >= 199) {
$('#customHTML').show();
$('#sped').html(customLink);
}
#customHTML {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th scope="row">Cart:</th>
<td>
<p id="top_cart_button"><span>€ 199,00</span></p>
</td>
</tr>
<tr class="price">
<th scope="row">Price:</th>
<td data-label="">
<h3 class="mainPrice"><span class="mainPriceAmount">99,00</span></h3>
</td>
</tr>
<tr id="customHTML" style="display:none">
<th scope="row">Shipping:</th>
<td>
<p id="sped"></p>
</td>
</tr>
</table>

span is not a class but an element, this works:
parseInt($('#top_cart_button span').text(), 10);

<li id="top_cart_button">
<a href="default.asp?cmd=showCart" rel="nofollow">
<span>0,00</span>
</a>
</li>
If its necessarily inside an anchor tag. (meaning if you want to ignore other spans that are not inside the "a" tag. )
$("li#top_cart_button a span").text(); //or html() if you are trying to get html.
and same for the function
parseInt($("li#top_cart_button a span").text(), 10);

You're almost nearly there just remove the "." between top_cart_button and span.
$('$('#top_cart_button span')')
Gets the span "element" in top_cart_button whereas your statement has a "." prefix which gets the first element with span "class" name.

function getDigitsFromString(str){
const regex = /\d+[.]?\d+/g;
const result = regex.exec(str.replace(',','.'));
if(result[0] !== null){
return parseFloat(result[0]);
}
return;
}
console.log(getDigitsFromString($('#top_cart_button > a > span').text()));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="top_cart_button">
<a href="default.asp?cmd=showCart" rel="nofollow">
<span>€ 55,55</span>
</a>
</li>

Related

Jquery fetch the text while ignore the class

I need some help with my code, I have got a problem with fetch the text while ignore the class menu-list-count as it will display the value next to the text.
When I try this:
var mailfolder = $(this).not('[class="menu-list-count"]').text();
The return output will be:
test1 2
It should be:
test1
Here is the html:
<a id="iJ" class="menu-list-item mailfolder" href="#test1" target="_top" title="test1" tabindex="-1" draggable="false">
<div class="qj">
<i style="float: left;" class="folder_icon"></i>
</div>
<span style="margin-left: 7px;">test1 <span class="menu-list-count">2</span></span>
</a>
Here is the code:
$(document).on('click', '.mailfolder', function(e) {
e.preventDefault();
var mailfolder = $(this).not('[class="menu-list-count"]').text();
alert(mailfolder);
});
I have tried this:
var mailfolder = $(this).find('span:not(.menu-list-count)').text();
It doesn't work when I try it as i still getting test1 2 so I dont really know what to do,
Can you please show me an example how I can get the span text while ignoring the class menu-list-count?
Because you have a span in a span, in order to select the right one you need to change this line:
$(this).not('[class="menu-list-count"]')
to:
$(this).find('span:not([class="menu-list-count"])')
In order to get only the text belonging to the upper span you can combine .contents() with .filter():
$(this).find('span:not([class="menu-list-count"])').contents().filter(function() {
return this.nodeType === Node.TEXT_NODE; // get only text nodes
}).text()
The snippet:
$(document).on('click', '.mailfolder', function(e) {
e.preventDefault();
var mailfolder = $(this).find('span:not([class="menu-list-count"])').contents().filter(function() {
return this.nodeType === Node.TEXT_NODE;
}).text();
console.log(mailfolder);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="iJ" class="menu-list-item mailfolder" href="#test1" target="_top" title="test1" tabindex="-1" draggable="false">
<div class="qj">
<i style="float: left;" class="folder_icon"></i>
</div>
<span style="margin-left: 7px;">test1 <span class="menu-list-count">2</span></span>
</a>
I'm not sure with JQuery, but with plain JS you can use childNodes to filter everything that is not a textNode and then concatenate the result.
I've wrote a small JSFiddle to show how it works: https://jsfiddle.net/sandro_paganotti/4873muzp/6/
HTML
<div>
Hello
<b>Some Text</b>
</div>
JS:
const nodes = Array.from(document.querySelector('div').childNodes);
const text = nodes.map(t =>
t.nodeType == Node.TEXT_NODE
? t.textContent
: ''
);
console.log(text.join(''));

How to call same method with different Ids

I have html controls of two sets with different ids in my page, when I click a tag I want to call DoSomething method.
<div>
<a href="javascript:void(0);" onclick="DoSomething();">
<span id="spnValue" >Value1</span>
</div>
<div>
<a href="javascript:void(0);" onclick="DoSomething();">
<span id="spnValue1">Value2</span>
</div>
function DoSomething() {
var htmlVal = "";
skuList = $("span[id*='spnValue']").html();
}
But whichever one I click it gives the Value1 in htmlVal. How can I distinguish and retrieve the value of method called
You can pass clicked element object to method:
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue1">Value2</span>
</div>
and then use it for traversing to child span element:
function DoSomething(obj) {
var htmlVal = "";
skuList = $(obj).find('span').html();
}
Working Demo
<div>
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue1">Value2</span>
</div>
function DoSomething(obj) {
var htmlVal = "";
skuList = $(obj).parent().find('span').html();
}
You can pass the current element in the function using that you can locate the span element which is a children on the a tag
<div>
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue" >Value1</span>
</a>
</div>
<div>
<a href="javascript:void(0);" onclick="DoSomething(this);">
<span id="spnValue1">Value2</span>
</a>
</div>
function DoSomething(node) {
var htmlVal = "";
skuList = $(node).find('span').html();//for children
//skuList = $(node).next('span').html();//for siblings
}

How to pass parameters to a javascript function from the element that calls the function?

I have a number of <li> items, which call the same onmouseover javascript function.
The function needs to extract some data from the element that calls it, to fill some name and tel variables. This data is typed in capitals in the html code below.
Any idea on how to do this is really appreciated.
My HTML:
<li id="item1" onmouseover= "onmouseoveragent(this)" >
<a href="some link">
<span class="hideme">name</span>
</a>
<p class="hideme"> NAME TO BE PASSED TO JS
<strong class="tel">NUMBER TO BE PASSED TO JS</strong>
</p>
</li>
MY javascript:
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
var name = e.?????;
var tel = e.?????;
};
</script>
yes you do something like this
JAVASCRIPT:
var elements = document.getElementsByClassName('data-item');
var mouseoverHandler = function() {
var name = this.getElementsByClassName('name')[0].textContent,
tel = this.getElementsByClassName('tel')[0].textContent;
alert('Name - ' + name + "\nTel - " + tel);
}
for( var i = 0; i < elements.length; i++ ) {
var current = elements[i];
current.addEventListener('mouseover', mouseoverHandler);
}
HTML MARKUP:
<li id="item1" class="data-item">
<a href="some link">
<span class="hideme">name</span>
</a>
<p class="hideme">
<span class="name">John Smith</span>
<strong class="tel">555-666-777</strong>
</p>
</li>
<li id="item1" class="data-item">
<a href="some link">
<span class="hideme">name</span>
</a>
<p class="hideme">
<span class="name">Caprica Smith</span>
<strong class="tel">545-334-641</strong>
</p>
</li>
MDN - document.getElementsByClassName();
MDN - element.textContent
It won't be e.something because e is referring to the event that just happened, that has nothing to do the other elements in the DOM
Demo
Well, there is an easier way to do it, just traverse the childNodes of your current hovered element and parse the results. Here is a working JSFiddle of the snippet below(yes, it works with all the LIs matching that structure):
function onmouseoveragent(e) {
var children = this.childNodes,
name = null,
tel = null;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.tagName === 'P') {
name = child.firstChild.nodeValue; // the first node is the text node
tel = child.childNodes[1].firstChild.nodeValue; // the strong's text node
break; // let's stop the iteration, we've got what we needed and the loop has no reason to go on
}
}
console.log(name, tel); // "NAME TO BE PASSED TO JS " "NUMBER TO BE PASSED TO JS"
}
The only difference in HTML is that you need to pass your handler this way:
<li id="item1" onmouseover="onmouseoveragent.call(this, event)">
So this inside the handler will refer to the element and not to the global object.
I suggest you two thing one change the structure of you li tag i.e; make the tag as shown
<li id="item1" class="someClass" >
<a href="some link">
<span class="hideme">name</span>
</a>
<p class="hideme">NAME TO BE PASSED TO JS </p>
<strong class="tel">NUMBER TO BE PASSED TO JS</strong>
</li>
remove strong from p because when you try to fetch p(data to be passed the strong tag will come along with it so better change it)
and also try jquery it will give you more flexibility and ease of use(what i feel)
$(".someClass").mouseover(function(e){
var name = $(e.target).find("p:first").html()
var tel = $(e.target).find("strong:first").html()
})
try this
function onmouseoveragent(e) {
var text = e.getElementsByClassName('hideme')[1].textContent;
var name = text.split("\n")[0]; var num = text.split("\n")[1]; alert(name); alert(num); }

How to get the Previous Sibling name

I need to get the name of the previous sibling . to keep it simple i have some sample code
<html>
<head>
<script type="text/javascript">
function myFunction()
{
var itm=document.getElementById("item2");
alert(itm.previousSibling.name);
}
</script>
</head>
<body>
<p name='pn'>paragraph</p>
<button id='item2' onclick="myFunction()">Try it</button>
</body>
</html>
Edit:
<table id="sort">
<tr name="nodrag nodrop">
<td colspan=3><strong><a style="cursor:pointer;" class="toggle">Group 1</a></strong> </td>
<td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
</tr>
<tr id="1" class="tr_group"'>
<td style="width:10px;" class="dragHandle"> </td>
<td>Umair Iqbal</td>
<td><span style="font-size: 12px; color: #999; line-height: 100%;">A Student at TUM</span></td>
<td style="text-align: right;"><a class="button3" href="#" ><span> Edit </span></a> <a class="button3" href="#" ><span> Delete </span></a></td>
</tr>
The Ist row is the previous sibling of the second row. I want the name of the 1st row and all my ids will be dynamic
thanks
Using jQuery it would be:
$('#item2').prev().attr("name")​​​​​​​​​​;​
With regular javascript you would need to use the following function (to ensure whitespace nodes are ignored)
getPreviousSiblingName(document.getElementById("item2"))
function getpreviousSiblingName(element) {
var p = element;
do p = p.previousSibling;
while (p && p.nodeType != 1);
return p.attributes["name"].value;
}
That's because more likely your previousSibling will be a text node and not an element node. You need previousElementSibling (where supported) or a loop that will get the previousElement until the nodeType will be 1 (Node.ELEMENT_NODE).
In addition, name is not applying to p element (see https://developer.mozilla.org/en/DOM/Element.name) it could be better if you use a custom attribute (like an HTML5 data-* attribute, in your case data-name maybe) and therefore use dataset to get the attribute's value, or a generic getAttribute.
Of course library like jQuery can help to abstract all those things, the explanation is related to just vanilla JavaScript.

javascript: access elements within a table

I'm pretty new to javascript. I have this sample table. I want to be able to get the "http://www.msn.com" but haven't been able to do so. How should I do this?
thanx in advance
j
<body>
<div id="tableContainer">
<table width="100%">
<thead>
<tr>
<th width="16%" > </th >
<th width="62%"> Otras acciones</th >
<th class="sort" width="2%"> Código certificado</th>
<th class="sort" > Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td class="iconos" >
<span class="sigAccion">
<a href="#" class="sigIcnHref" title="Duplicar" />
<span class=" btnDuplicar">
</span></a>
<a href="http://www.msn.com" class="sigIcnHref" title="Modificar" />
<span class=" btnModificar">
</span></a>
</span> </td>
<td class="AccionRegistro">
<ul>
<li>
<a href="#" >Docència </a></li>
<li>
<a href="#" >Matrícula(S) </a></li>
<li>
<a href="#" >Plans(1) </a></li>
<li>
<a href="#" >Professors(1) </a></li>
<li>
<a href="#" >Horaris(9) </a></li>
<li>
<a href="#" >HorarisProfessors(1) </a></li>
</ul></td>
<td > <sup>2</sup>CAMD</td>
<td> Cert. Alumno Matriculado Ext.</td>
</tr>
</tbody>
</table>
</div>
</body>
straight javascript is pretty easy.
grab a reference to a known element above the a element higher up the tree
get a list of a elements under the known element
match the href property to the value you know
var anchor = null;
var container;
var items;
container = document.getElementById('tableContainer');
items = container.getElementsByTagName('a');
for (var j = 0; j < items.length; j++) {
if (items[j].href === 'http://www.msn.com') {
anchor = items[j];
break;
}
}
it would be better if you could directly reference the table element and then get a list of a elements from there, but if that's the only table in tableContainer it's fine.
for checking the href property for a known value, i usually go with a case-insensitive regex but this should be fine for your case.
Using a framework like jQuery it's pretty simple:
var href = $('#tableContainer .iconos a[title=Modificar]').attr('href');
Using plain Javascript it's more complicated if you can't simply add an id to the element to make it easier to locate it. You can for example look through all links in the page:
var href;
var links = document.links;
for (var i = 0; i < links.length; i++) {
if (links[i].title == 'Modificar') href = links[i].href;
}
you can also do this by using jQuery
$('#tableContainer a').each(function() {
if (this.href == 'http://www.msn.com'){
// Do something like $(this).hide();
}
else {
// Do somthing like $(this).show();
}
});
here is an example of JSFiddle
If the structure is always like this, a code for Prototype would look like this:
var allLinks = $$('#tableConatiner tbody tr td span a');
var msnLInk = allLinks[1].href;
You can also use jQuery with a similar selector or even pure JS which will need some additional selections. But using an id attribute (e.g. "msnLink") you can get it using a direct selection:
var msnLink = $('msnLink').href;
I can you extend the code with an ID?
EDIT: If the title or class is unique and always the same you can also use one of the following lines:
var msnLink = $$('a[class="sigIcnHref"]').first().href;
var msnLink = $$('a[title="Modificar"]').first().href;
Can you give us some more information about the structure and what you want to do with the element after selecting it?

Categories