javascript - 如何为每个元素运行一个函数并产生不同的结果？

Question

我发现了 Bitwise Creative 的这个不错的脚本，可以通过值更改数字内容的颜色。

$(function () {
    // Score Color
    var score = parseInt($('em').text().trim());
    var color = 'red';
    if (!isNaN(score)) {
        if (score >= 2) {
            color = 'orange';
        }
        if (score >= 3) {
            color = 'green';
        }
        $('em').css('color', color);
    }
});

我的问题:它将所有数字内容更改为相同的颜色。因此，如果我有多个数字内容，则此脚本在数字和颜色之间没有区别。我如何修改它，例如每个 [em] 值 [/em] 变成他自己的颜色？

<em>1</em> --> red
<em>2.5</em> --> orange
<em>3</em> --> green
<em>1.5</em> --> red

麻生太郎。

Answer 1

$('em').text() 将为您提供一个包含所有匹配元素的组合文本的字符串。

您需要迭代 em 元素并分别对它们应用颜色

$(function () {
    // Score Color
    $( "em" ).each( function(){
        var score = parseInt($(this).text().trim());
        var color = 'red';
        if (!isNaN(score)) {
            if (score >= 2) {
                color = 'orange';
             }
             if (score >= 3) {
                 color = 'green';
             }
             $(this).css('color', color);
        }
    });
});