Проверить id и класс с помощью jQuery

Question

Я пытался проверить мой id с помощью jQuery, и мне интересно, почему он не работает. Что я сделал не так?

<td class="food" id="butter"> 
    butter 
</td> 
<td class="food" id="milk"> 
    milk 
</td> 

$(function(){ 
    if ($('.food').attr('id') == "butter"){ 
     $('.food').css({ color: 'red' }); 
    } else { 
     $('.food').css({ color: 'blue' }); 
    } 
}); 

Он показывает все красные. Есть идеи? Большое спасибо.

Answer 1

Во-первых, существует несколько .food элементов, так что вам нужно в цикле с использованием each(), а затем в течение этого цикла вы должны использовать this ссылаться только на текущий элемент. Попробуйте это:

$('.food').each(function() { 
    if (this.id == "butter"){ 
     $(this).css({ color: 'red' }); 
    } else { 
     $(this).css({ color: 'blue' }); 
    } 
}); 

Вы можете сократить это еще с использованием троичной:

$('.food').each(function() { 
    $(this).css('color', this.id == 'butter' ? 'red' : 'blue'); 
}); 

Working example

Answer 2

Или без .each():

$(".food").css({color: 'blue'}).filter("#butter").css({color: 'red'});