How to hide "span" if it text is "0" using jQuery? - javascript

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();
});

Related

Using $(document).ready(function() to change the text of a label

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

JQuery - Detecting which div box was clicked

I'm trying to detect which div box was clicked with JQuery and I'm not sure what I am doing wrong. I'm aware that I can approach this in a different method by directly calling functions if a div box is clicked, but I wish to do it this way by first determining what was clicked.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id; //looks for the id of what was clicked
if (id != "myDivBox"){
callAFunction();
} else {
callSomeOtherFunction();
}
});
});
Thank you for any suggestions!
You could use the closest function to get the first ancestor element with tag div, see following example:
$(document).ready(function() {
$(document).click(function(event){
var parentDiv = $(event.target).closest("div");
console.log(parentDiv.prop("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<span id="span1">Test1</span>
</div>
<div id="div2">
<span id="span2">Test2</span>
</div>
I hope it helps you. Bye.
No matter what you click, you will always know the element that was clicked:
$("#myDiv").click(function(e){
alert("I was pressed by " + e.target.id);
});
Knowing that you don't want to add this to every div, and you have your click on your document, you'll need to figure out what divs can be reported as "clicked".
In order to do this you'll either need a strict hierarchy of elements in your DOM (which is anoyingly bad) or you can decorate "clickable" div's with a specific class.
Fiddle - similar to below. https://jsfiddle.net/us6968Ld/
I would use closest in Jquery to get the result you want.
$(document).ready(function() {
$(document).click(function(event){
var id = event.target.id;
var clickDiv = $(event.target).closest('div[class="clickable"]');
alert(clickDiv[0].id);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" id="clickable1">
<span id="foo"> click me - Foo - clickable 1</span>
</div>
<div id="notClickable1">
<div class="clickable" id="clickable2">
<span id="span1">
Click Me Inside Span 1 - clickable 2
</span>
</div>
<div class="clickable" id="clickable3">
<div id="notClickable2">
<div id="notClickable3">
<span id="click me">Click Me - clickable 3</span>
</div>
</div>
</div>
</div>
try this:
$('div').click(function() {
alert($(this).attr('id'));
});
https://jsfiddle.net/1ct0kv55/1/

hide div if specific text is displayed in span

I'm trying to hide a a div if a specific text is displayed in a span. I'm using jquery and this is the code:
HTML
<div class=“deliveryUpsellText”>
<p>blabla</p>
</div>
<ul>
<li class=“error-msg”>
<ul>
<li>
<span> Coupon Code “blabla” is not valid
</span>
</li>
</ul>
</li>
</ul>
<button type="button" id="cartCoupon" title="Apply Coupon" class="button applycouponhide" onclick="discountForm.submit(false) ; " value="Apply Coupon"><span style="background:none;"><span style="background:none;">Apply</span></span></button>
jQuery
$j('#cartCoupon').click(function(){
if($j(".error-msg span:contains('blabla')")){
$j('.deliveryUpsellText').css({"display":"none"});
}
});
It hides the div on click, but it ignores the if statement. So even if the text in the span was 'cat' it still hides the div. Can anybody spot what I've done wrong?
Also as the #cartCoupon button has the onclick event dicountForm.submit(false); the deliveryUpsellText is being hidden on click but it's not bound to the form submit so it shows again once the form has been submitted. Anybody know how I can fix that?
jQuery collection is always truthy (because it's an object). You need to check if it contains nodes (selected something). Use length property for this:
if ($j(".error-msg span:contains('blabla')").length) {
$j('.deliveryUpsellText').css({
"display": "none"
});
}
Please try this one
$(document).ready(function () {
$("#cartCoupon").click(function () {
var errMsg = $(".error-msg ul li span").text();
if (errMsg.search("blabla") >= 0) {
$(".deliveryUpsellText").hide();
}
});
});

How can I hide a specific element that is outside of .each() Jquery

By Sharepoint a bunch of tds get generated with a few elements inside of them. So just to be clear I cant edit or change elements since it gets generated.
What I want to accomplish is to iterate throught all '.js-contentFollowing-itemLink' and then if the .text() contains the specific text I am looking for the '<span> Stop following</span>' should become hidden with '.hide()'.
I cant seem to accomplish this I have tried many ways.
Here is the jsfiddle:
http://jsfiddle.net/QXwyk/3/
Also take notice that I cant grab a id that is unique and many of these elements are generated with different values and texts.
HTML:
<span class="ms-contentFollowing-itemTitle">
test
</span>
<br>
<div class="js-contentFollowing-itemUrlDiv">
<span class="ms-metadata ms-contentFollowing-itemUrl"></span>
<input type="text" readonly="readonly" class="ms-metadata ms-contentFollowing-itemUrl ms-contentFollowing-itemFullUrl" style="visibility: visible; border-color: transparent; background-color: transparent;">
</div>
<span>Stop following</span>
My JS:
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test")
$(this).closest("span").hide();
});
Note: I know it hides wrong element but the If statement works its the code inside the if statement that I cant accomplish I need to hide ' Stop following'. This JS is just one of the examples I have done that is not working.
I tried with $('.ms-secondaryCommandLink span').hide(); inside the if statement but that removed all <span> with "Stop following" :/
Thanks a bunch!
Several issues in your code:
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test")
var text = $(this).parent().parent().parent().hide); <-- hide not closed properly
} <--- Extra bracket here..
});
Working code:
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test") {
var text = $(this).parent().parent().parent().hide();
}
});
Html
<div class="ms-content">
<span class="ms-contentFollowing-itemTitle">
test
</span>
<br>
<div class="js-contentFollowing-itemUrlDiv" id="contentFollowingUrl_18" url="http://dev/socialsites/Utförsåkning">
<span class="ms-metadata ms-contentFollowing-itemUrl"></span>
<input type="text" readonly="readonly" class="ms-metadata ms-contentFollowing-itemUrl ms-contentFollowing-itemFullUrl" style="visibility: visible; border-color: transparent; background-color: transparent;">
</div>
<span>Stop following</span>
</div>
JS
$('.js-contentFollowing-itemLink').each(function () {
if ($(this).text() == "test")
var text = $(this).closest('.ms-content').find('.ms-secondaryCommandLink').hide();
});
http://jsfiddle.net/QXwyk/4/
You can select the object containing specific text by following way,based on which you can can do remaining actions ...
Example: $('.js-contentFollowing-itemLink:contains(test)').hide(); will hide "test"

Hide a decimal using jquery

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/

Categories

Resources