I am working on project where I need to collect the price value form below div
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
I need help to find the solution.
Here is my suggestion to make it understandable what you are looking for
Plain JS
console.log(
document.querySelector("span.price span:last-child").getAttribute("data-price")
);
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
jQuery version
console.log(
$("span.price span:last").data("price")
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
or $("[data-currency-iso]").next().data('price');
or $(".price").find("[data-price]").data('price');
Use jQuery to do stuff like this easily.
Insert into your HTML in the <head></head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Then:
$('.price [data-price]').data('price');
It would be better though if you just added a class to your price div and did this:
$('.price-amount').data('price');
I guess you're looking for dataset
The HTMLElement.dataset property allows access, both in reading and
writing mode, to all the custom data attributes (data-*) set on the
element, either in HTML or in the DOM.
var elem = document.querySelector('[data-price]');
console.log(elem.dataset.price);
var elem = document.querySelector('[data-price]');
console.log(elem.dataset.price);
<div>
<span class="price">
<span data-currency-iso="BDT">৳</span>
<span dir="ltr" data-price="21000">21,000.00</span>
</span>
</div>
Related
I want to change span value to <span class='tag'>test_succeed</span>,
I tried "input" but it doesn't work, any idea ?
<span class="tag" id="tag-option">
<input type='hidden' name='tag-value' value='' id="test-input">
<span class="close"></span>
</span>
<script>
document.getElementById('test-input').value = "test_succeed";
</script>
If you are only trying to add text to the span, you don't need an input element. You can use the innerText function.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
<span class="tag" id="tag-option">
<span class="close"></span>
</span>
<script>
document.getElementById('tag-option').innerText = 'test_succeed';
</script>
EDIT
To keep the "close" span, you can use prepend:
https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend
<span class="tag" id="tag-option">
<span class="close">Close Span</span>
</span>
<script>
document.getElementById('tag-option').prepend('test_succeed');
</script>
When you are talking about <tag>value</tag> you are referring to a DOM object, in this particular case you are trying to update the inner HTML for that tag.
So you can do it using:
document.getElementById('my_id').innerHTML = 'my text';
(https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
Or using jQuery:
$('#my_id').html('my text');
(https://api.jquery.com/html/)
I'm using HighlightJS to format code that's being stored in a model's TextField of my Django application.
Here is the template HTML:
<pre>
<code class="{{ compiler.highlight_js_alias }}">{{ compiler.unit_test_boilerplate_code }}</code>
</pre>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css"
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
Example output:
<pre>
<code class="ruby hljs language-ruby">
<span class="hljs-keyword">class</span>
<span class="hljs-title class_">Person</span>
:
<span class="hljs-keyword">def</span>
<span class="hljs-title function_">__init__</span>
(
<span class="hljs-params">
<span class="hljs-variable language_">self</span>, name, age</span>
):
<span class="hljs-variable language_">self</span>
.name = name
<span class="hljs-variable language_">self</span>
.age = age
me = Person(
<span class="hljs-string">"Nathan"</span>
<span class="hljs-number">32</span>
)
print(me.name)
</code>
</pre>
Why are certain fragments not highlighted? Thank you for any advice.
After inspecting the outputted HTML of HighlightJS' own demos, it seems this is expected behavior.
I have an html code:
<div class="listing_detail col-md-4 propertyprice_display"><strong>Price:</strong>
<span class="price_label price_label_before">USD </span> UGS 6,000
<span class="price_label">per month</span></div>
Price:
UGS 6,000
per month
That is displayed as Price: USD UGS 6,000 per month
I am wondering if its actually possible to remove UGS if the span price_label price_label_before if not empty. If empty, UGS should not be removed using jQuery?
$(document).ready(function(){
var spanText = $('.price_label_before').text().trim();
if(spanText !== null){
var nHTML = $('.propertyprice_display').html();
nHTML = nHTML.replace('UGS','');
$('.propertyprice_display').html(nHTML)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing_detail col-md-4 propertyprice_display"><strong>Price:</strong>
<span class="price_label price_label_before">USD </span> UGS 6,000
<span class="price_label">per month</span></div>
<div class="listing_detail col-md-4 propertyprice_display"><strong>Price:</strong>
<span class="price_label price_label_before"> </span> UGS 7,000
<span class="price_label">per month</span></div>
Your html
<div class="listing_detail col-md-4"><strong>Price:</strong>
<div class='emptyclass'>
<span class="price_label price_label_before"> </span> UGS 6,000
<span class="price_label">per month</span></div>
</div>
Your JS
$(document).ready(function(){
if($('.price_label_before').html().trim()=="")// check if span is empty
{
$('.emptyclass').html('');//if yes then emtpty div
}
else
{
//your else defination
}
});
The simplest thing to do would be to wrap the text that may need to be removed in its own span element for easy removal, but assuming that you need to keep the HTML structure as is, you can access the plain text that is not wrapped by extracting a DOM node reference from the JQuery wrapped set of elements when needed.
Please see the comments in the code below for explanations:
// Just passing a function to the JQuery shortcut identifier: $ is the same
// thing as: $(document).ready(function()...
$(function() {
// Get reference to the element to check:
var $spanToCheck = $(".price_label.price_label_before");
// Check the element's text:
if ($spanToCheck.text() !== "") {
// Get reference to the text node that comes after the span. Note the [0] which
// extracts an element from the JQuery wrapped set and returns a regular DOM node:
let nodeToFix = $(".price_label.price_label_before")[0].nextSibling;
// Correct the node value of the node
nodeToFix.nodeValue = nodeToFix.nodeValue.replace("UGS", "");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing_detail col-md-4"><strong>Price:</strong>
<span class="price_label price_label_before">USD </span> UGS 6,000
<span class="price_label">per month</span></div>
<div class="listing_detail col-md-4"><strong>Area:</strong>
<span class="">10sqm </span>
</div>
You can use this snippet to achieve what you want:
$(document).ready(function(){
var spanText = $('.price_label.price_label_before').text().trim();
if(spanText !== ''){
var nHTML = $('.listing_detail').html();
nHTML = nHTML.replace('UGS','');
$('.listing_detail').html(nHTML)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing_detail col-md-4"><strong>Price:</strong>
<span class="price_label price_label_before">USD </span> UGS 6,000
<span class="price_label">per month</span></div>
I'm trying to change the text on a button in a plugin I am using using jquery.
It's outer html is
<button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour">
<span class="ladda-label">
<i class="ab-hour-icon">
<span></span>
</i>8:00 am
</span>
</button>
It's inner html is
<span class="ladda-label">
<i class="ab-hour-icon">
<span></span>
</i>8:00 am
</span>
Anyone know how I'd change 8:00AM to 9-3AM?
You can use javascript Node.nextSibling that contain immediately text after element.
$(".ab-hour .ab-hour-icon")[0].nextSibling.nodeValue = "9-3AM";
$(".ab-hour .ab-hour-icon")[0].nextSibling.nodeValue = "9-3AM";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour"><span class="ladda-label"><i class="ab-hour-icon"><span></span></i>8:00 am</span></button>
Also you use only javascript
document.querySelector(".ab-hour .ab-hour-icon").nextSibling.nodeValue = "9-3AM";
Do you mean this?
$( "yourbutton" ).html('yourtext');
I would do it like this
$( ".ab-hour span" ).html('9-3AM');
It would be best to change the inner HTML so the span can directly be changed. If that is not an option you could use
$( ".ab-hour span" ).html('<i class="ab-hour-icon"><span></span></i>9-3AM');
Try this
$(".ladda-label").html("<i class=\"ab-hour-icon\"></i>9-3 am");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour">
<span class="ladda-label">
<i class="ab-hour-icon">
</i>8:00 am</span>
</button>
You have to add <span> in jquery code so your icon will remain
$(".ab-hour").html('<span class="ladda-label"><i class="ab-hour-icon"><span></span></i>9-3AM</span>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button value="[[3,1,1488182400]]" data-group="2017-02-27" class="ab-hour">
<span class="ladda-label">
<i class="ab-hour-icon">
</i>8:00 am</span>
</button>
Below is the HTML and following jQuery. If I return the attr("data-conn"); it alerts the correct value but using .data("conn") it doesn't. Why?
<span>
<!-- ... -->
<a href="link.html" class="textbutton" data-conn="text3">
<img src="/images/image.png">
</a>
</span>
<span style="width:610px;height:200px;float:right; background-color:#bcbcbc;font-size:15px;line-height:15px;">
<div class="texts" id="text1">Initial Header</div>
<span class="texts" id="text2" style="display:none;">Text for another one</span>
<span class="texts" id="text3" style="display:none;">Content Text</span>
</span>
<script type="text/javascript">
$(".textbutton").click(function(){
var link = $(this).data("conn");
alert(link);
$(".texts").fadeOut(1000, function() {
$("#text2").fadeIn(1000);
});
return false;
});
</script>
The way you're trying works fine using the latest version of jQuery:
var link = $(this).data("conn");
Here is a working demo
You may alternatively try like this
var link = $(this).attr("data-conn");