alterar cor de conteúdo de acordo com valores na tabela

Eu estou com dificuldades em passar esse text() para int retirando essa barra e ai seguir em frente, quando eu deixo a string so para ver o código rodando, funciona perfeitamente.

$(document).ready(function () {
    $(".placares").each(function () {
        if ($(this).text() == "3/6") {
            //limpa class anterior
            $(this).removeAttr('');
            //adiciona class desejada 
            $(this).addClass('badge badge-info');

        } else if ($(this).text() === "2/6") {
            //limpa class anterior
            $(this).removeAttr('');
            //adiciona class desejada 
            $(this).addClass('badge badge-warning');

        }
    });
});

Oi Rodrigo, tudo bem?

Me explica um pouco melhor essa lógica "com o maiores e menores (6/4) fica verde e (5/7) fica vermelho" para eu poder te ajudar?

Mas estou pensando em algo assim. Você pode criar 2 classes CSS:

    .vermelho{
        background-color: red;
    }
    .verde{
        background-color: green;
    }

E apenas adicionar ou removê-las de acordo com a lógica

$(".placares").each(function (e) {
    var valor = getValor(e);
    if (valor > 0.5) {
        .attr( "class", "placares" )
        e.addClass("vermelho")
    }
        if (valor < 0.5) {
        e.attr( "class", "placares" )
        e.addClass("verde")
    }
.
.
.

}

esse 5/7 é o resultado do placar que o usuário cadastrou e pode visualizar na mesma tela, se eu tivesse apenas o numero acredito que o JS iria pegar isso num int e ficaria fácil minha lógica rodar, mas como temos ai uma barra o JS ja vira para um string

<td>
<span class="placares">5/7</span>
</td>

na minha logica aqui embaixo eu vou pegando todos esses textos "5/7 ou 6/3 e etc..." e inicialmente preciso tirar essa "/" separar esses valores para depois compara-los se o primeiro número for maior quero essa classe "badge badge-warning" adicionada e do contrário quero um outro badge.

$(document).ready(function () {
    $(".placares").each(function () {
        if ($(this).text() == "3/6") {
            //limpa class anterior
            $(this).removeAttr('');
            //adiciona class desejada 
            $(this).addClass('badge badge-info');

        } else if ($(this).text() === "2/6") {
            //limpa class anterior
            $(this).removeAttr('');
            //adiciona class desejada 
            $(this).addClass('badge badge-warning');

        }
    });
});

estou me batendo em retirar essa barra e passar esse text() para um int onde eu possa compara-lo.

espero que tenha entendido, ou posso tentar explicar mais.

Entendi. Acho que esse código resolve seu problema

Eu extrai a lógica que pega o primeiro e segundo valor dado um placar no formato "primeiroNumero/segundoNumero" -> "6/4"

Lembre-se de sempre que possível encapsular essas lógicas porque facilitam a legibilidade do código e talvez seja possível que você vá usá-la em outro lugar.

<script type="text/javascript">
    var spans = $(".placares");
    spans.each(function(i, val) {
        var valores = getValores(val.textContent);
        if(valores.primeiroNumero > valores.segundoNumero) {
            $(val).removeAttr('').addClass('badge badge-info');
            return
        }
        if(valores.primeiroNumero < valores.segundoNumero) {
            $(val).removeAttr('').addClass('badge badge-warning');
            return
        }
        ..
        ..
        ..//demais condicoes desejadas
    })

    function getValores(texto) {
        var split = texto.split('/');
        return {
            primeiroNumero: parseInt(split[0], 10),
            segundoNumero: parseInt(split[1], 10)
        };
    }
</script>

Parece ser isso, porem tentei usar agora e não obtive sucesso, consegue me explicar oque seria esse "í" abaixo? ele não é usado, tb não tenho erro no console, vou tentar ver oq pode ser.

spans.each(function (i, val) {

Rodando! :)

Oi Rodrigo, só pra complementar ali e explicar o (i, val).

quando passados 2 parâmetros assim, recebe-se no primeiro parâmetro o indice do array e no segundo parâmetro se recebe o valor.

Na primeira interação do each(), o i seria 0 e o val seria o primeiro span.

mas o código também poderia ser escrito usanto o this.

spans.each(function() {
        var valores = getValores(this.textContent);
        if(valores.primeiroNumero > valores.segundoNumero) {
            $(this).removeAttr('').addClass('badge badge-warning');
            return
        }
        if(valores.primeiroNumero < valores.segundoNumero) {
            $(this).removeAttr('').addClass('badge badge-warning');
            return
        }
    })