jQuery If Contains Add CSS to class for multiple values, same class

Question

Using Drupal 7, I have webform submission values being printed in a view. I have a select box webform component with safe_key|value, but due to the webform submission data only being saved as a related Cid in the database, I can't create an individual key for each result, and as the class is printed in the view template, and not as part of the printed value, I cant have unique classes.

I have the reduced my html to the basics to show the following html printed in the view...

<table>
<tbody>
<tr>
    <td class="views-field views-field-value-10" >
       <p class="bookingstatus">Paid in Full</p>        
    </td>
</tr>
<tr>
    <td class="views-field views-field-value-10" >
       <p class="bookingstatus">Deposit Paid</p>        
    </td>
</tr>
<tr>
    <td class="views-field views-field-value-10" >
       <p class="bookingstatus">Cancelled</p>        
    </td>
</tr>
</tbody>
</table>

I want each printed value to be a different colour based on the result. Paid=Green, Deposit=Yellow, Cancelled=red.

I am using the following jQuery to change the style color based on the result.

if (jQuery(".bookingstatus:contains('Paid in Full')").length) {
    jQuery(".bookingstatus").css("color","green");
    }

But this changes every element with the .bookingstatus class to green, Is there any way I can be specific, and only change the single element color to green on the fields that contain "Paid in full"?

Answer 1

You could use:

jQuery(".bookingstatus:contains('Paid in Full')").css("color","green");

This will target all .bookingstatus elements which contain the text 'Paid in Full'.

jsFiddle here