Question

我正在尝试使用jQuery根据内容“装饰”一些div。

我的网页上有很多div，而我希望定位的所有div都具有相同的类名.gains

如果.gains div的内容为= 0，则将其设为灰色。如果它超过0，则将其设为绿色。如果它小于0，则将其设为红色。

我试图写一些东西，但我不知道如何迭代所有div而不是只是将每一个数据抓取到一个字符串中。

window.onload = decorateGains();
function decorateGains(){
    var gain_loss = $(".gains").text();
    console.log("gains_loss = " + gain_loss);
    if (gain_loss < 0){
        // make red
    }else if (gain_loss == 0){
        // make grey
    }else if (gain_loss > 0){
        // make green
    }
}

HTML看起来像这样：

<div class="row row-1">
    <div class="cell cell-1 data">Nov 14 9:30am</div>
    <div class="cell cell-1 data">1,567</div>
    <div class="cell cell-1 data gains">1567</div>
</div>
<div class="row row-2">
    <div class="cell cell-1 data">Nov 14 4:30pm</div>
    <div class="cell cell-1 data">1,566</div>
    <div class="cell cell-1 data gains">-1</div>
</div>

Answer 1

如果符合条件，您可以使用特定样式。另外，请记住将文本转换为数字。

请参阅此代码段：

decorateGains();
function decorateGains() {
    $(".gains").each(function() {     // loop thru all .gains
        var num = +($(this).text());  // get text and convert to number
        if (num > 0) {
            $(this).addClass("green"); // apply appropriate class
        }
        if (num < 0) {
            $(this).addClass("red");   // apply appropriate class
        }
      
      // no need to check for equality as that will be default.
    });
}

.gains {
    color: #ccc;
}
.red {
    background-color: #f00;
    color: #fff;
}
.green {
    background-color: #0f0;
    color: #fff;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row row-1">
    <div class="cell cell-1 data">Nov 14 9:30am</div>
    <div class="cell cell-1 data">1,567</div>
    <div class="cell cell-1 data gains">1567</div>
</div>
<div class="row row-2">
    <div class="cell cell-1 data">Nov 14 4:30pm</div>
    <div class="cell cell-1 data">1,566</div>
    <div class="cell cell-1 data gains">0</div>
</div>
<div class="row row-3">
    <div class="cell cell-1 data">Nov 14 4:30pm</div>
    <div class="cell cell-1 data">1,566</div>
    <div class="cell cell-1 data gains">-1</div>
</div>

Answer 2

在jquery中使用每个

 $(".gains").each(function() {

   var gain_loss = parseInt($(this).text());
   console.log("gains_loss = " + gain_loss);
if (gain_loss < 0){
    // make red
}else if (gain_loss == 0){
    // make grey
}else if (gain_loss > 0){
    // make green
}
  });

Answer 3

试

$(".gains").each(function () {
    var value = $(this).text();
    $(this).addClass((value == 0) ? "grey" : (value > 0) ? "green" : "red");
});

<强> DEMO

Answer 4

css() jQuery方法接受一个函数作为第二个参数，你可以使用：

$(".gains").css('color', function(){
    return +$(this).text() > 0 ? "green": +$(this).text() === 0 ? "grey" : "red";
});

您可以改为添加特定的类。

获取具有相同类名的所有div的内容，根据其值更改CSS

4 个答案: