jQuery: Wybierz wszystkie elementy z wartością mniejszą niż 1

Question

Mam wiele elementów w domie z klasą .blockbadge, jeśli wartość dowolnego .block-badge wynosi 0, a następnie chcę dodać klasę do tego elementu, aby styl był inny.

Moje JS dodaje klasę do wszystkich tych elementów, jeśli ktokolwiek z nich jest równy 0. Jak mogę to zrobić tylko w przypadku elementów, które są równe zeru?

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

Kod w PO nie będzie działać, ponieważ $('.block-badge').html() powróci html pierwszego elementu z klasą block-badge więc w tym przypadku powrotu string 1, należy przeanalizować zwróconą wartość, a następnie porównać ją z 0. Można zamiast tego użyć metody filter().

Opis: Zmniejsz zestaw dopasowanych elementów do tych, które pasują do wyboru albo przechodzą testu funkcji.

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

Nadzieja to pomaga.

---

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

Jak to

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

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

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


    }); 

Answer 3

Można użyć selektora jQuery :contains dla danego znaczników

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

to nie będzie działać, jeśli wszystkie inne elementy zawiera zera, jak 10, 101 itd. Więc jeśli trzeba tylko0, użyć filtru

FIDDLE

Answer 4

Spróbuj użyć .text(function(index, originalText) {}) gdzie this jest bieżący element w kolekcja, originalHtml jest obecny textContent

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

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