CODEWITHSUNDEEP
javascriptjqueryhtml
Asad Hussain
Asad Hussain

Reputation: 99

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

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.

Upvotes: 5

Views: 4247

Answers (4)

m87
m87

Reputation: 4523

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

Upvotes: 0

Mohammad
Mohammad

Reputation: 21489

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>

Upvotes: 9

Scott Marcus
Scott Marcus

Reputation: 65808

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>

Upvotes: 2

andi
andi

Reputation: 6522

Loop through them each one by one, and check the contents with .text():

$(".zilla-likes-count").each(function(){
    if ($(this).text() === '0') {
        $(this).hide();
    }
});

Upvotes: 4

Related Questions