JavaScript hide DIV tag if text is 0

Question

I have a problem. I'm trying to hide div if text is 0. My code is:

<script type="text/javascript">
    $(function () {
        if ($(".notification-counter").text() == "0") {
            $(".notification-counter").hide();
            $(".notification-container").hide();
        }
    });
</script>

<div class="dropdown nav-search pull-right <?php $this->_c('login') ?>">
    <a href="../pm/" class="dropdown-toggle"><i class="fa fa-inbox"></i>
        <div class="notification-container">
            <div class="notification-counter">
                <?php
                      jimport( 'joomla.application.module.helper' );
                      $module = JModuleHelper::getModule('mod_uddeim_simple_notifier');
                      echo JModuleHelper::renderModule( $module, $attribs );
                ?>
            </div>
        </div>                                  
    </a>    
</div>

but it's not working... anyone can help? thanks for answers!

Try if ($.trim($(".notification-counter").text()) === "0")you have a space in DIV. Be aware, .text() will return the text of only first matched element, so if you have more than one .notification-counter element, you have to check it inside a loop and hide only respective container — A. Wolff
– A. Wolff, Commented Jan 23, 2015 at 12:29

JRulle · Accepted Answer · 2015-01-23 13:01:00Z

4

Try using parseInt() to make your comparison a number vs. a number rather than comparing text strings (it alleviates issues with whitespace. JSFIDDLE

$(function () {
    if (parseInt($(".notification-counter").text()) == 0) {
        //$(".notification-counter").hide();
        $(".notification-container").hide();
    }
});

edited Jan 23, 2015 at 13:01

answered Jan 23, 2015 at 12:36

JRulle

7,5666 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A. Wolff Over a year ago

as a side note, you don't need to hide the counter, you are already hidding the container. But that's said, this is more readable solution than trimming text imho.

JRulle Over a year ago

@A.Wolff good point... i commented out the hide counter line.

Pratik Joshi · Accepted Answer · 2015-01-23 12:38:02Z

3

Use trim as there are white spaces

FIDDLE

$(function () {
    if ($.trim($(".notification-counter").text()) == "0") {
        $(".notification-counter").hide();
        $(".notification-container").hide();
    }
});

answered Jan 23, 2015 at 12:38

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

2 Comments

Pratik Joshi Over a year ago

Why downvotes ? I gave correct answer with fiddle !!

Chrillewoodz Over a year ago

Looks like there's someone that's downvoting everything.. :/

amitabhdhiwal · Accepted Answer · 2015-01-23 13:02:25Z

2

Just remove the quotes around 0, and it would work fine.

$(function () {
    if ($(".notification-counter").text() == 0) {
        $(".notification-counter").hide();
        $(".notification-container").hide();
    }
});

Additional Information: Since many here seem to be unclear, here's a little helper: Try this in your console

 //hit F12 to view the console
var counter = $(".notification-counter");
var container = $(".notification-container");
console.log(container.text(), container.html());
console.log(container.text() == 0,container.text() == "0");
//true, false
console.log(typeof 0, typeof "0");
//number, string

JSFiddle

edited Jan 23, 2015 at 13:02

answered Jan 23, 2015 at 12:45

amitabhdhiwal

213 bronze badges

Comments

Tarun · Accepted Answer · 2015-01-23 12:36:23Z

1

var notificationCounter = $('.notification-counter');
if (notificationCounter.text().trim() === '0') {
  notificationCounter.closest('.notification-container').hide();
}

answered Jan 23, 2015 at 12:36

Tarun

1,9084 gold badges19 silver badges31 bronze badges

Comments

Cruzer · Accepted Answer · 2015-01-23 13:25:50Z

1

Try this: instead of .text() put .html()

$(function() {
  if ($(".notification-counter").html() == "0") {
    $(".notification-counter").hide();
    $(".notification-container").hide();
  }
});

edited Jan 23, 2015 at 13:25

answered Jan 23, 2015 at 12:38

Cruzer

1531 silver badge11 bronze badges

1 Comment

Qantas 94 Heavy Over a year ago

Welcome to Stack Overflow. Where possible, it's better to put a bit of explanation of what your code does, as well as linking to relevant documentation -- this will help to gain reputation and privileges! For more tips, take a look at How to Answer. Thanks!

Collectives™ on Stack Overflow

JavaScript hide DIV tag if text is 0

5 Answers 5

2 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related