Замена текста изображением с помощью JQuery

Question

Я ищу, чтобы заменить текст в таблице изображением. У меня будет три варианта текста: Сильный, средний, слабый. Это необходимо для определения приоритетности прочности кофейных изделий. Если текст говорит сильным, то я хочу заменить на «strong.png» и т. Д. Я получил это далеко, но теперь застрял в идеях. Нижеследующее не работает.

Мой код до сих пор:

$().ready(function() { 
    $('.data-table tr .data').each(function() { 
     string = $(this).text('Strong'); 
     $(this).html('<img src="strong.png" alt="' + string + '" />'); 
    }); 
}); 

</script> 

таблица разметки:

<table class="data-table" id="product-attribute-specs-table"> 
    <colgroup><col width="25%"> 
    <col> 
    </colgroup><tbody> 
     <tr class="even"> 
      <th class="label">Coffee Strength</th> 
      <td class="data last">Strong</td> 
     </tr> 
      </tbody> 
</table> 

Любая помощь будет оценена.

Answer 1

Попробуйте

jQuery(function ($) { 
    $('.data-table tr .data').each(function() { 
     var string = $.trim($(this).text()); 
     $(this).html('<img src="' + string + '.png" alt="' + string + '" />'); 
    }); 
}); 

Demo: Fiddle

Answer 2

$('.data-table tr .data').html(function() { 
    var currentText = $(this).text().toLowerCase(); 
    return '<img src="' + currentText + '.png" alt="' + currentText + '" />'; 
}); 

DEMO: http://jsfiddle.net/jRELP/