jQuery: apunte a todos los elementos con un valor inferior a 1: javascript, jquery, if-statement

Tengo varios elementos en el dom con una clase de .blockbadge si el valor de alguna .block-badge es 0, entonces quiero agregar una clase a ese elemento para darle un estilo diferente.

Mi JS agrega la clase a todos estos elementos si alguno de ellos es igual a 0. ¿Cómo puedo hacer que solo afecte a los elementos que son iguales a cero?

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

Respuestas

El código en el OP no funcionará porque $(".block-badge").html() devolverá el html del primer elemento con clase block-badge entonces en este caso return string 1, debe analizar el valor devuelto y luego compararlo con el 0.

Podrías usar filtrar() método en su lugar.

Descripción: Reduzca el conjunto de elementos coincidentes a los que coinciden con el selector o pasan la prueba de la función.

$(".block-badge").filter(function(){
return parseInt($(this).text())==0;
}).addClass("zero");

Espero que esto ayude.

$(".block-badge").filter(function(){
return parseInt($(this).text())==0;
}).addClass("zero");

.zero{
color: red;
font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="block-badge">1</span>
<span class="block-badge">0</span>
<span class="block-badge">4</span>

Me gusta esto

   $(".block-badge").each(function(){

if(parseInt($(this).html()) ===0){

$(this).addClass("zero");
}


});

Podrías usar jQuery :contains selector para ese marcado específico

$(".block-badge:contains(0)").addClass("zero");

no funcionará si cualquier otro elemento contiene un cero, como 10, 101 etc. así que si necesitas solamente 0, usa un filtro

VIOLÍN

Intenta usar .text(function(index, originalText) {}) dónde this es el elemento actual dentro de la colección, originalHtml es actual textContent

$(document).ready(function() {
$(".block-badge").text(function(index, originalText) {
if (originalText <= 0) {
$(this).addClass("zero");
}
return originalText
});
});

jsfiddle https://jsfiddle.net/s2g3zpwr/3/