Farbe für verschiedene Elemente anders

Hallo, ich habe ein ListView:

<ul id="test" data-role="listview" data-filter="true" data-input="#myFilter">

</ul>

Dies wird mittels JavaScript und einer JSON Datei mit Daten befüllt.

<script type="text/javascript">
$('#menue').on("pageshow", function(){

$('#test').empty();

$.getJSON('daten.json', function(data) {
$.each(data.uebersicht, function(i,item) {
$('<li><a href="detail.html" data-transition="slide" onClick="javascript:sessionStorage.test=\''+item.name+'\';"><img src="bilder/'+item.bild+'"/><h3>'+item.name+'</h3><p>'+item.untertitel+'</p></a></li>').appendTo('#test');
});
$('#test').listview('refresh');
});
});
</script>

Nun möchte ich, wenn der Untertitel "error" enthält, den Text von schwarz in grau ändern. Wie kann ich das machen?

Okay danke!
Ich möchte noch in jeder ListView Zeile eine ProgressBar:
http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_progressbar2&stacked=h

Wie kann ich dies machen das ich diese einbinde ins html und dann nur noch den Wert übergeben muss zum anzeigen?

Könnte ich auch irgendwie eine animation machen indem ich die Werte schrittweise setze? Wie würde das gehen?

Kann man auch die länge der ProgressBar ändern? Leider ist diese für mein ListView zu groß. Finde den Teil im CSS leider nicht.