Question

下面有html，

<em>+5.0</em>
<em>+3.2</em>
<em>-2.4</em>
<em>-4.6</em>

我想在以下条件下为每个数字设置颜色。如果数字大于0，颜色将为红色。而其他人则是蓝色的。输出将是

+5.0 (red color)
+3.2 (red color)
-2.4 (blue color)
-4.6 (blue color)

如何使用jQuery执行此操作？

我尝试了什么

if ($('em').text() > 0){
    $(this).css('color', 'red');
}

但是$('em').text()不是一个元素，我无法正确应用风格。我怎么能这样做？

Answer 1

您需要使用.each()来维护this上下文

$('em').each(function(){
    if (+$(this).text() > 0){
        $(this).css('color', 'red');
    }
})

OR，.filter()可以使用。

$('em').filter(function(){
    return +$(this).text() > 0;
}).css('color', 'red')

注意：我已使用+将文本转换为数字。

Answer 2

使用$ .each遍历所有em，并使用parseFloat（）。试试这个：

$('em').each(function(){
  if (parseFloat($(this).text()) > 0){
      $(this).css('color', 'red');
  }
});

Answer 3

您可以遍历每个em元素，检查内容并依次应用样式：

$("em").each(function(){
    if ($(this).text() > 0) {
        $(this).css('color', 'red');
    } else {
        $(this).css('color', 'blue');  
    }
});

JSFiddle

Answer 4

您必须使用parseInt或parseFloat将文本转换为整数＆amp;然后与0进行比较

$('em').each(function(){
var _getText = parseInt($(this).text())
if(_getText >0){
$(this).css('color','blue');
}
else{
$(this).css('color','red');
}

})

检查Here是否有工作jsfiddle

使用jQuery通过条件将样式设置为html标记

4 个答案: