I have this structure:
<td class="prd-var-price">
<div class="price-total">
<span class="price-unit">€</span>
<span class="price-value">
<span class="price-value-int">1.760</span>
<span data-decimalseparator="," class="price-value-cent">,00</span>
</span>
</div>
</td>
when I write in the console:
a.getElementsByClassName("prd-var-price")
I would to take the value of price-value-int element (1760), I tried with:
$(a.getElementsByClassName("prd-var-price").getElementsByClassName("price-value-int"));
but this not work.
getElementsByClassName returns an array of elements, if you want only the first one (and in your example - you do) you should use a.getElementsByClassName("prd-var-price")[0].getElementsByClassName("price-value-int")[0]
but since you are using jQuery, a simpler approach would be:
$('.prd-var-price .price-value-int');
jQuery uses css selector syntax to grab elements, you'll still get an array if more then one of this class structure exists
You can use jQuery FIND function to achieve your Goal
$(".prd-var-price").find(".price-value-int").text();
Demo
Better to use $('.prd-var-price .price-value-int) instead of using $(a.getElementsByClassName("prd-var-price").getElementsByClassName("price-value-int"));
You might have multiple td with same class.
Better to use parent > child selection with find()
$('.prd-var-price').find('.price-value-int').text();
In each()
$('.prd-var-price').each(function(){
console.log($(this).find('.price-value-int').text());
});
$('td.prd-var-price').each(function(key, value){
console.log($(this).find('.price-unit').text());
console.log($(this).find('.price-value-int').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="prd-var-price">
<div class="price-total">
<span class="price-unit">€</span>
<span class="price-value">
<span class="price-value-int">1.760</span>
<span data-decimalseparator="," class="price-value-cent">00</span>
</span>
</div>
</td>
<td class="prd-var-price">
<div class="price-total">
<span class="price-unit">#</span>
<span class="price-value">
<span class="price-value-int">2.760</span>
<span data-decimalseparator="," class="price-value-cent">00</span>
</span>
</div>
</td>
</tr>
</table>
By using JQuery:
$("tr.prd-var-price").find('div.price-total span.price-value span:first-child").text();
Related
My code in HTML :
<td id ="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</td>
and Jquery :
$(document).ready(function () {
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
})
}
But when i click "Show" , it's not working.
You can't have a standalone <td> without a table and table row surrounding it. As soon as you write valid markup, it works:
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</td>
</tr>
</table>
As suggested in other answers already, an ID is already a unique identifier for a DOM element, so there's actually no need to use two ids in a selector and it might even internally slow down finding the correct node.
use div the place of td and your code is working.
<div id ="tdtest">
<a id="atest" href="#">
<span id="spantest">Show</span>
</a>
</div>
JS
$(document).ready(function () {
$("#tdtest #atest").on('click',function(){
alert ("Success !!!");
});
});
working fiddle here
only use one id in selector
put code after document ready, $(function(){ code here.. })
$(function(){
$("#atest").on('click',function(){
alert ("Success !!!");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<td id="tdtest">
<a id="atest">
<span id="spantest">Show</span>
</a>
</td>
I want to get rid of those <tr> with <span class="verfied-badge"> inside it using javascript. (please note that I am hoping for a solution that is javascript only, no jquery)
The HTML structure is like this:
<tr class="project-description">
<td colspan="6">
<div class="project-desc-inner">
<div class="project-synopsis">
<p class="trunk8">This is an entry</p>
</div>
<div class="project-verification">
<span class="verfied-badge"> <~~~~~~~~~~ THIS SPAN
<span class="currency-symbol">$</span>
<span class="icon-tick"></span>
Verified
</span>
</div>
<div class="project-actions">
<a href="#">
<button class="btn">LOL</button>
</a>
</div>
</div>
</td>
</tr>
And this is as far as I can come up to:
function showAlert()
{
document.querySelectorAll("tr.project-description").filter(document.getElementsByClassName("verfied-badge")).remove();
alert("Unwanted removed.");
}
What I hope it does is, select all tr.project-description then from those get all with have span.verfied-badge and if it does have it, delete the entire tr
but as it seems, I keep failing :(
Hope somebody can help.
Thanks!
Find all the tr elements you care about, then see if they containing a matched verified-badge span. If they do, burninate remove them.
window.addEventListener('load', function() {
var projectDescriptions = document.querySelectorAll('tr.project-description'),
projectDescriptions = Array.prototype.slice.call(projectDescriptions);
projectDescriptions.forEach(function(el) {
if (el.querySelector('span.verfied-badge')) {
el.parentNode.removeChild(el);
}
});
});
I called Array.prototype.slice on the NodeList returned from querySelectorAll because querySelectorAll doesn't return an array but a NodeList, which is one of JavaScript's irritating (but easy to workaround) "Array-like objects".
I have this HTML structure:
<tr class="project-details">REMOVE THIS</tr>
<tr class="project-description">
<td colspan="6">
<div class="project-desc-inner">
<div class="project-synopsis">
<p class="trunk8">This is an entry</p>
</div>
<div class="project-verification">
<span class="verfied-badge"> <~~~~~~~~~~ THIS SPAN
<span class="currency-symbol">$</span>
<span class="icon-tick"></span>
Verified
</span>
</div>
<div class="project-actions">
<a href="#">
<button class="btn">LOL</button>
</a>
</div>
</div>
</td>
</tr>
And I hope that the entire <tr class="project-details">REMOVE THIS</tr> plus its contents will be remove completely
This is what I have so far:
function showAlert()
{
var projectDescriptions = document.querySelectorAll('tr.project-description'),
projectDescriptions = Array.prototype.slice.call(projectDescriptions);
projectDescriptions.forEach(function(el) {
if (el.querySelector('span.verfied-badge')) {
}else {
el.parentNode.removeChild(el);
el.prev('tr').remove();
}
});
}
What it does is select the <tr> with the <span> I am looking for, then delete the entire span. This part el.prev('tr').remove(); is not working, any alternative?
Thanks!
The body of the else clause:
(function removePreviousSibling(sibling) {
if (sibling.nodeName === 'TR' && sibling.classList.contains('project-details')) {
return sibling.parentNode.removeChild(sibling);
}
removePreviousSibling(sibling.previousSibling);
}(el.previousSibling));
el.parentNode.removeChild(el);
The IIFE ensures if there is an extra text node between the two <tr> elements that the text node will be skipped and not deleted if you just did called a removeChild on the previousSibling of the target element.
Take a look over the information at MDN's DOM page. It's got a great set of interface documentation and tutorials.
prev is a method of a jQuery object. HTMLElement object has no prev method. For selecting the previous element sibling you can use the previousElementSibling property.
I have the following structure:
<tr data-commercial="commercial_8">
<td class="tdCommercial">
Mister X
<h4>Planning</h4>
<ul>
<li data-day="Monday">
<i class="fa fa-plus-square fa-1"></i>
<i class="fa fa-minus-square fa-1"></i>
Lundi
<span class="number">2</span>
</li>
<li data-day="Tuesday">
<li data-day="Wednesday">
<li data-day="Thursday">
<li data-day="Friday">
</ul>
</td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wednesday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
<td class="Sunday"></td>
</tr>
With jQuery, I am using an onClick event with the element <i class="fa fa-plus-square fa-1"></i>.
What is the best way to retrieve the data-commercial attribute on the first tr from this element ?
The structure can change, so I need something like "find the first data-commercial attribute before myElement"
Thanks !
Use .closest()
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
Example:
var commercial = $(this).closest('tr').data('commercial');
Note: Provided this refers to element <i class="fa fa-plus-square fa-1"></i>
$('#myElement').closest('tr').attr('data-commercial');
Use closest:
$(this).closest('tr').data('commercial');
$(this).parents("tr").data("commercial")
Use .closest() in jquery
$(this).closeset('tr').data('commercial');
Ok, so, I have a question.
I am getting the element ID like this.
<td id="ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1" class="PriceBuyContainer">
document.getElementById("ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1")
And this is below it.
<div class=" roblox-buy-now btn-primary btn-small PurchaseButton " data-item-id="168167114" data-item-name="Wanwood Visor" data-userasset-id="1941846042" data-product-id="20655974" data-expected-price="114" data-asset-type="Hat" data-expected-currency="1" data-expected-seller-id="6141596" data-bc-requirement="0" data-seller-name="laughableblox">
Buy Now
<span class="btn-text">Buy Now</span>
</div>
How would I get data-expected-price="NUMBERHERE" by using?
document.getElementById("ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1")`
Use JQuery's .data() function. First you can grab the td element via jQuery:
var el = $("#ctl00_cphRoblox_lstItemsForResale_ctrl1_Td1");
Then find it's first child element and use use .data() to return the expected-price data attribute's value:
alert(el.find('> div').data('expected-price'));
jsFiddle