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

jQuery: Target all elements with val less than 1

本文关键字：小于 元素 val 定位 jQuery      更新时间：2023-09-26

我在 dom 中有多个元素，其中一类为 .blockbadge 如果任何.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');
}

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>

像这样

   $('.block-badge').each(function(){
    if(parseInt($(this).html()) ===0){
    $(this).addClass('zero');
    }

    });

你可以使用 jQuery :contains 选择器来实现该特定标记

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

如果任何其他元素包含零，例如10，101等，则不起作用，因此，如果您只需要0，请使用过滤器

小提琴

尝试使用.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/

相关文章：