CSS inside xml response in jquery ui autocomplete

is there a way to give a different css class to a part of the label inside the xml response? In other words the label value now is

label: $( "name", this ).text() + ", " + ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ) + ", " + $( "countryCode", this ).text()

I wish to give a different css class only to $( "countryCode", this ).text() since I wish that its font开发者_如何学JAVA have to be smaller than the others (name and countryName)

Is there a way?

success: function( xmlResponse ) {
 var data = $( "geoname", xmlResponse ).map(function() {
 return {
 value: $( "name", this ).text() 
 ,
 label: $( "name", this ).text() + ", " +
 ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ) + ", " +
 $( "countryCode", this ).text()
 , 
 id: $( "geonameId", this ).text()
 };
 }).get();

Wrap it in a span and give the span the class. Since you are using XML, you may consider using a more meaningful tag and styling it (unless this is just XHTML).