jQuery: target di tutti gli elementi con valore inferiore a 1

Question

Ho più elementi nella dom con una classe di .blockbadge se il valore di qualsiasi .block-badge è 0, quindi voglio aggiungere una classe a quell'elemento per modificarlo in modo diverso.

Il mio JS aggiunge la classe a tutti questi elementi se qualcuno di loro è uguale a 0. Come faccio a fare in modo che abbia effetto solo su quegli elementi che sono uguali a 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'); 
} 

Answer 1

Il codice nel PO non funzionerà perché $('.block-badge').html() restituirà la html del primo elemento con classe block-badge così in questo caso ritorno stringa 1, è necessario analizzare il valore restituito e confrontarlo con lo 0.

È possibile utilizzare invece il metodo filter().

Descrizione: Ridurre l'insieme di elementi corrispondenti a quelli che corrispondono selettore o superare la prova della funzione.

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

Spero che questo aiuti.

---

$('.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>

Answer 2

Ti piace questa

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

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

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


    }); 

Answer 3

Si potrebbe utilizzare il selettore jQuery :contains per quella specifica marcatura

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

non funzionerà se altri elementi contiene uno zero, come 10, 101 ecc quindi se avete bisogno solo0, utilizzare un filtro

FIDDLE

Answer 4

Provare a utilizzare .text(function(index, originalText) {}) dove this è elemento corrente all'interno collezione, originalHtml è corrente textContent

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

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