jQuery: Target all elements with val less than 1

I have multiple elements in the dom with a class of .blockbadge if the value of any .block-badge is 0 then I want to add a class to that element in order to style it differently.

My JS adds the class to all of these elements if anyone of them equal 0. How do I make it only affect those elements which equal zero?

HTML

<span class="block-badge">1</span>
<span class="block-badge">0</span> // this element should have the class 'zero' added
<span class="block-badge">4</span>

JS

var blockBadgeVal = $('.block-badge').val();

if (blockBadgeVal < 0) {
    $('.block-badge').addClass('zero');
}