if statement (jQuery)

I'm unable to figure out what is causing 10 that keeps to be displayed red. Other numbers are displaying like it should, but only on number 10 if statement fails to compare proper value.

$( document ).ready(function() {
$("thead tr td:nth-child(3)").each(function(){

    var compare = $(this).text()

        if( compare == 'null' ) {
             $(this).text('No rating found').parent('tr').addClass("table-danger");
        }
          else if ( compare <= '5' ) { //Number 10 keeps comparing whit this statement       
                        $(this).parent('tr').addClass("table-danger");    
          }
          else if ( compare > '5' &&  compare < '7' ) {       
                        $(this).parent('tr').addClass("table-info");    
          }
           else if ( compare >= '7' ) {       
                        $(this).parent('tr').addClass("table-success");    
          }
     });
});

Something is wrong whit first else if statement.

Live Demo: http://ift.tt/2s0UWyv