jQuery: Nhắm mục tiêu tất cả các phần tử có giá trị nhỏ hơn 1

Question

Tôi có nhiều phần tử trong dom với một lớp là .blockbadge nếu giá trị của bất kỳ .block-badge là 0 thì tôi muốn thêm một lớp vào phần tử đó để tạo kiểu khác.

JS của tôi thêm lớp vào tất cả các yếu tố này nếu có ai bằng 0. Bằng cách nào tôi làm cho nó chỉ ảnh hưởng đến những yếu tố bằng 0?

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

Mã trong OP sẽ không làm việc vì $('.block-badge').html() sẽ trả lại html của phần tử đầu tiên với lớp block-badge như vậy trong trường hợp này trở lại chuỗi 1, bạn nên phân tích cú pháp giá trị trả lại sau đó so sánh nó với 0. Thay vào đó, bạn có thể sử dụng phương thức filter().

Mô tả: Giảm tập các phần tử phù hợp với những người phù hợp với bộ chọn hoặc vượt qua bài kiểm tra của hàm.

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

Hy vọng điều này sẽ hữu ích.

---

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

Như thế này

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

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

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


    }); 

Answer 3

Bạn có thể sử dụng bộ chọn jQuery :contains cho rằng đánh dấu cụ thể

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

nó sẽ không làm việc nếu có các yếu tố khác có chứa một số không, như 10, 101 vv để nếu bạn cần chỉ0, sử dụng một bộ lọc

FIDDLE

Answer 4

Hãy thử sử dụng .text(function(index, originalText) {}) nơi this là yếu tố hiện tại trong vòng bộ sưu tập, originalHtml là hiện textContent

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

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