Change weight and color of a paragraph with a highest score

Question

What's the best way in achieving the following:

Make weight:bold + color:white for the team with the highest score. (no change in color/weight for ties)

HTML

<div class="fixture">
   <div class="teams">
      <p class="item_one_215">Newcastle United</p>
      <p class="item_two_215">Tottenham Hotspur</p>
   </div>
   <div class="scores">
      <p class="item_one_215">2</p>
      <p class="item_two_215">1</p>
   </div>
</div>
<div class="fixture">
   <div class="teams">
      <p class="item_one_216">Arsenal</p>
      <p class="item_two_216">Sunderland</p>
   </div>
   <div class="scores">
      <p class="item_one_216">0</p>
      <p class="item_two_216">0</p>
   </div>
</div>

jQuery

    var teamOneGoal_215 = 2;
    var teamTwoGoal_215 = 1;

    if (teamOneGoal_215 > teamTwoGoal_215) {
        $('p.item_one_215').css("font-weight","bold").css("color","#ccc");
    }
    else if (teamOneGoal_215 === teamTwoGoal_215)
    {
        $('p.item_one_215').css("font-weight","bold").css("color","#777");
        $('p.item_two_215').css("font-weight","bold").css("color","#777");
    }
    else
    {
        $('p.item_two_215').css("font-weight","bold").css("color","#ccc");

        }

....

I have tried assigning specific variable to each team, but there must be a more intelligent and efficient way to achieve this.

Answer 1

Try this

$('.teams').each(function(){
    var $this = $(this);
    var $team1 =  $this.find('p:eq(0)');
    var $team2 =  $this.find('p:eq(1)');
    var $scoresDiv = $this.next('.scores');
    var score1 =  +$scoresDiv.find('p:eq(0)').text();
    var score2 =  +$scoresDiv.find('p:eq(1)').text();

    if(score1 > score2){
        $team1.addClass('winner');
        $scoresDiv.find('p:eq(0)').addClass('winner');
    }
    else if(score2 > score1){
        $team2.addClass('winner');
        $scoresDiv.find('p:eq(1)').addClass('winner');
    }
})​

Check Fiddle

Can be further optimized..