Question

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

我的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()将返回带有类block-badge的第一个元素的html，所以在这种情况下返回字符串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>

Answer 2

喜欢这个

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

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

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


    });

Answer 3

您可以将jQuery :contains选择器用于该特定标记

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

如果任何其他元素包含零，10，101等，它将无效。因此，如果您只需要 0，请使用过滤

FIDDLE

Answer 4

尝试使用.text(function(index, originalText) {})其中this是集合中的当前元素，originalHtml是当前textContent

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

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

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

4 个答案: