jQuery:使用小于1的val来定位所有元素

Question

我在dom中有多个元素,.blockbadge如果any的.block-badge值为0,那么我想在该元素中添加一个类,以便以不同的方式设置它.

我的JS将类添加到所有这些元素中,如果它们中的任何一个等于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

OP中的代码将无法工作,因为$('.block-badge').html()将返回带有类的第一个元素的html,block-badge因此在这种情况下返回字符串1,您应该解析返回的值,然后将其与0.

您可以使用filter()方法.

描述:将匹配元素集减少到与选择器匹配的元素集或通过函数测试.

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

希望这可以帮助.

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