I have seen lot of questions but none of them seems to have answer for this. I need this help desperately. I am hosted on Magentogo so have no acceess to the core files, however with the help of jquery I want to hide .00 from my store. My codes look like this for example. The price of the item of Rs. is also in HTML could not paste as
<div class="price-block"
<p> The price of this item is
<span class="price" id="oldprice">
<span class="WebRupee"> Rs. </span>3,795.00 </span></p>
</span>
</div>
<script>
$('#price-block').html($('#price-block').html().replace(".00",""));
</script>
</body>
</html>
You have it as a class in your div
<div class="price-block" // <-- also missing >
use the class selector .
$('.price-block')
http://jsfiddle.net/WBsjA/
I think you'll need to loop each .price-block rather than trying to run it on the whole code mat once.
$('.price-block').each(function(){
$(this).html($(this).html().replace(".000","").replace(".00","").replace(".0",""));
});
Also you need to fix up your HTML markup
<div class="price-block">
<p> The price of this item is
<span class="price" id="oldprice">
<span class="WebRupee"> Rs. 3,795.000</span>
</span>
</p>
</div>
http://jsfiddle.net/daCrosby/XK48G/
Here's one approach. Since your price isn't wrapped in its own unique HTML <span> to make it easy to locate and replace, you need to parse the parent element, separate the child nodes from the text nodes, and rebuild it:
var newval;
$('.price').each(function(j, pr) {
// trick to remove the webRupee element for later
var $webRupee = $(pr).find('.WebRupee').remove().wrap('<div>').parent().html();
$(pr).contents().each(function(i, el) {
if (el.nodeType === 3 && el.nodeValue.match(/\.00/)) {
newval = el.nodeValue.replace(/\.00/, '');
}
});
$(pr).html($webRupee + newval);
});
http://jsfiddle.net/mblase75/r2V6r/
Related
I have a list of items which need to be re-categorised depending on what the user decides.
<li class="indent_padd" data-show-question="53" data-tech-id="1" data-step-id="1" data-show-answers="1">
<p>
<span class="sub_step_title">
Example question text
</span>
</p>
<div class="slidecontainer">
<div class="slide_checkcontainer">
<div class="bs_sliders elRes" id="54_slider"></div>
<script>
$(document).ready(function(){
var slider_54_slider = document.getElementById('54_slider');
noUiSlider.create(slider_54_slider,{"start":0,"range":{"min":0,"max":100},"steps":4,"connect":"lower","direction":"ltr","orientation":"horizontal","pips":{"mode":"steps","stepped":"true","density":4}});
// Set one handled slider
slider_54_slider.noUiSlider.set(0);
slider_54_slider.noUiSlider.on('update',function(values){
$('#result_54_slider').val(values[0]);
})
})
</script>
<input type="text" value="0" id="result_54_slider" class="rangeUpdate" data-toggle="popover" data-trigger="manual" data-content="The permitted value range is 0-100" />
</div>
<div class="radio_container hasSlider">
<input type="checkbox" name="steps[54_4]" value="4" id="id_54_4" class="elRes" />
</div>
</div>
</li>
I then later run the following JS:
$('li[data-type="'+core_row+'"]').each(function(){
var thisID = $(this).data('typeid');
var newList = $(this).find('ul');
$(newList).empty();
var bringIn = $('li[data-'+get_items+'-id="'+thisID+'"]');
$(bringIn).each(function(){
$(newList).append($(this).clone(true,true));
$(this).remove();
})
})
I am using a slider (alt HTML range) as the question and had previously tried Bootstrap-slider (Destroy and re-initialize a bootstrap-slider) believing it was an issue with the slider code. I have since amended the code to use https://refreshless.com/nouislider/).
So what isn't working?? Basically in both instances the sliders lose their attached events - typically these relate to mouse actions as its a drag required. So why, when I'm using deep, deep cloning (and jq 3.5.1) are these events not being copied across when cloned? I would have expected to literally be able to "move" the LI and its entire contents/objects/variables etc and it work. If cloning isnt the answer - what is the best way of doing it?
If it makes a difference - the UL is hidden when it is appended to.
fI am trying to change a label that says "Copies" in this
$(document).ready(function() {
$('.availableLabel.copiedCountLabel').text("Available in Region");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="availableDiv0" class="availableDiv copiesCountSection">
<span class="availableLabel copiesCountLabel">Copies: </span>
<span style="display:inline-block;" name="smallSearchingGif" id="copiesCountNumber1040573" class="availableNumber copiesCountNumber">
2
</span>
</span>
How would I go about changing the text "Copies" to "Available in Region".
Maybe, this class is wrong?
.copiedCountLabel
Try to use class .copiesCountLabel as in your html code:
$(document).ready(function(){
$('.availableLabel.copiesCountLabel').text("Available in Region");
});
You have a typo in your selector.
You want to get copiesCountLabel, but trying to get copiedCountLabel.
Also think about using the id attribute for such unique classes.
If you want to select the label with both the classes need to write the selectors together without spaces in between.
In your case it is .availableLabel.copiesCountLabel the classes of label.
$(document).ready(function() {
$('.availableLabel.copiesCountLabel').text("Available in Region ");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="availableDiv0" class="availableDiv copiesCountSection"><span class="availableLabel copiesCountLabel">Copies: </span><span style="display:inline-block;" name="smallSearchingGif" id="copiesCountNumber1040573" class="availableNumber copiesCountNumber">2</span></span>
One suggestion would be in case if this is the only element which needs to be change then better to use id instead of class
I'm looking to hide spans that contain a 0. I've looked at other code and I've tried to adapt it but I can't get it to work correctly. I want it to only hide the span when the contents is a "0", but when running the code below it also hides any number that contains 0, so 10 for example, which I don't want.
Just to make it a little clearer, the span should only display if the number inside it is greater than 0 (it's a counter that starts from 0 so can't be less than 0 anyway).
Any help is appreciated.
HTML
<div id="post-excerpts-likes">
<a href="#" class="zilla-likes" id="zilla-likes-175519" title="Like this">
<span class="zilla-likes-count">0</span>
</a>
</div>
jQuery
$(".zilla-likes-count:contains('0')").hide();
Please also note that there are going to multiple spans on the page all with the same class, I would like the code to affect them all.
You need to select element has exactly equal text but the :contains() isn't what you want. The .filter() is a good function to filtering selected element based on it text.
$(".zilla-likes-count").filter(function(){
return $(this).text().trim() === "0";
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-excerpts-likes">
<a href="#" class="zilla-likes" id="zilla-likes-175519" title="Like this">
<span class="zilla-likes-count">Text0Text</span>
<span class="zilla-likes-count">0</span>
</a>
</div>
Loop through them each one by one, and check the contents with .text():
$(".zilla-likes-count").each(function(){
if ($(this).text() === '0') {
$(this).hide();
}
});
You can iterate each matching element and then check its text to see if it exactly matches "0" and hide it if it does.
Here you go:
$(".zilla-likes-count").each((i,e) => e.textContent === '0' ? $(e).hide() : '');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-excerpts-likes">
<a href="#" class="zilla-likes" id="zilla-likes-175519" title="Like this">
<span class="zilla-likes-count">0</span>
<span class="zilla-likes-count">10</span>
<span class="zilla-likes-count">55</span>
</a>
</div>
simple.. just iterate over the class array and check if its value contains 0. so, the code would be like:
$(".zilla-likes-count").each(function(){
if ($(this).text() === '0') $(this).hide();
});
I know this question already have asked before and i also tried the answer and it almost worked for me but there is one issue which i can't able to sort i tried plenty of ways but all in wain.
This is the div i want to hide
<div class="price-box" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<p class="price"><span class="special-price" style="display: none;">
<span class="amount">$43.50</span>
</span>
</p>
</div>
when this div is not empty
<div class="single_variation"><span class="price"><span class="amount">$43.50</span></span></div>
This is what i implement
jQuery(document).ready(function() {
if( jQuery('.single_variation').is(':empty') ){
alert('hi');
jQuery('.price-box').show();
}
});
and also
if($('.price').length) {
$('.price-box').hide();
}
:empty select elements that have no children.
What you need to check is ":visible" :
$(document).ready(function() {
if($('.single_variation').is(':visible') ){
alert('hi');
$('.special-price').hide();
}
});
Also I replaced show by hide.
Edit :
What is this ?
if($('.category').length){
$('.filter').hide();
}
There is no class like category or filter in your example. Not useful in your question !
I want to find out if an element is empty or not. Probably this is one of the best examples to help people understand difference between innerText and innerHTML as well.
Here are the examples:
1. <div> <!-- Just a comment node is present inside a div --> </div>
2. <div> <span></span> </div>
3. <div> hi </div>
4. <div> hello <!-- world --> I know javascript </div>
5. <div> </div>
Example_Number | innerHTML | innerText | #childElements | isElementEmpty(Result)
1............................| Not Empty....| Empty........| 0.........................| YES
2............................| Not Empty....| Empty........| 1.........................| No
3............................| Not Empty....| Not Empty..| 0.........................| No
4............................| Not Empty....| Not Empty..| 0.........................| No
5............................| Empty..........| Empty.........| 0.........................| Yes
In #5, trimmed value is considered.
Clearly, innerHTML does not contribute to check whether an element is empty or not. Now, we need to check how innerText/textContent and numberOfChildElement contribute. So based on above findings, I have concluded
An element is empty when both of these conditions is met.
Trimmerd innerText/textContent is empty. (Satisfies #5)
Number of child elements is ZERO. (Satisfies #2)
So the code becomes
function isEmpty(element) {
return (element.textContent.trim() && element.childElementCount == 0);
}
I just want to validate my approach and tell if I miss any use case here or a better solution would be really helpful.
Innertext is just plain text.Whatever you put in the innertext will be shown as plain text.i.e.a text like "<b>sdasdas</b>" will be shown as "<b>sdasdas</b>"
InnerHTML is plain html code.WHatever you put in innerHTML will be treated as HTML code.i.e.a text like "<b>sdasdas</b>" will be shown as "sdasdas" in bold letters
I have prepared example which is help you to understand difference between innerText and innerHTML and other related function
<HTML><BODY>
<div id="div1">
<H1><B>Hi<I> There</I></B></H1>
</div>
innerText: Works only in IE browser<br/>
innerHTML: work on all browser and return html content<br/>
textContent : Remove html tag from content<br/>
Jquery function to get text / HTML <br/>
.text()<br/>
.html()<br/>
<input id="innerText" type="button" value="innerText"/>
<input id="innerHTML" type="button" value="innerText"/>
<input id="textContent" type="button" value="textContent"/>
<input id="text" type="button" value=".text()"/>
<input id="html" type="button" value=".html()"/>
$( "#innerText" ).click(function() {
alert(document.getElementById("div1").innerText);
});
$( "#innerHTML" ).click(function() {
alert(document.getElementById("div1").innerHTML);
});
$( "#textContent" ).click(function() {
alert(document.getElementById("div1").textContent);
});
$( "#text" ).click(function() {
alert( $("#div1").text());
});
$( "#html" ).click(function() {
alert( $("#div1").html());
});