Question

I have following generrated HTML, and I want to add some CSS class to them from client-side with jQuery.

I’d like to add CSS class “user-active” to the following “” tag that has the text “Active”

<a id="ctl00_ContentPlaceHolder1_lvStudent_ctrl5_lnkStatus">Inactive</a>
<a id="ctl00_ContentPlaceHolder1_lvStudent_ctrl6_lnkStatus">Active</a>
<a id="ctl00_ContentPlaceHolder1_lvStudent_ctrl7_lnkStatus">Inactive</a>

I’d like to add CSS class “user-inactive” to the following “” tag that has the text “Inactive”

<span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl5_lblStatus">Inactive</span>
<span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl4_lblStatus">Active</span>
<span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl6_lblStatus">Active</span>

Thanks.

Updated HTML output inside the container:

<table cellspacing="1" class="time-sheet" id="TimeSheet">
<thead>
<tr>
    <td>
    </td>
    <td colspan="5">
    </td>
</tr>
<tr>
    <th>
        <a href="#">Name</a>
    </th>
    <th>
        <a href="#">Id</a>
    </th>
    <th>
        <a href="#">User name</a>
    </th>
    <th>
        <a href="#">Status</a>
    </th>
</tr>
</thead>
<tbody>
<tr>
    <td>
         Charlie Sansa
    </td>
    <td>
         210
    </td>
    <td>
        charlieb
    </td>
    <td>
        <span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl0_lblStatus">Active</span>
    </td>
</tr>
<tr>
    <td>
         Rai Ninga
    </td>
    <td>
         211
    </td>
    <td>
        raiw
    </td>
    <td>
        <span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl1_lblStatus">Inactive</span>
    </td>
</tr>
<tr>
    <td>
         Sokcheng Ima
    </td>
    <td>
         212
    </td>
    <td>
        sokchengu
    </td>
    <td>
        <span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl2_lblStatus">Active</span>
    </td>
</tr>
<tr>
    <td>
         Khamkhong Ying
    </td>
    <td>
         213
    </td>
    <td>
        khamkhongt
    </td>
    <td>
        <span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl3_lblStatus">Active</span>
    </td>
</tr>
<tr>
    <td>
         Monica Seth
    </td>
    <td>
         214
    </td>
    <td>
        monicat
    </td>
    <td>
        <span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl4_lblStatus">Active</span>
    </td>
</tr>
<tr>
    <td>
         Andrew Donut
    </td>
    <td>
         215
    </td>
    <td>
        andrewm
    </td>
    <td>
        <span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl5_lblStatus">Inactive</span>
    </td>
</tr>
<tr>
    <td>
         Jarn Maras
    </td>
    <td>
         216
    </td>
    <td>
        jarnt
    </td>
    <td>
        <span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl6_lblStatus">Active</span>
    </td>
</tr>
<tr>
    <td>
         Juliette Buran
    </td>
    <td>
         217
    </td>
    <td>
        juliettec
    </td>
    <td>
        <span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl7_lblStatus">Inactive</span>
    </td>
</tr>
<tr>
    <td>
         Sattaporn Lovin
    </td>
    <td>
         218
    </td>
    <td>
        sattapornw
    </td>
    <td>
        <span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl8_lblStatus">Active</span>
    </td>
</tr>
<tr>
    <td>
         Surachard Karach
    </td>
    <td>
         219
    </td>
    <td>
        surachards
    </td>
    <td>
        <span id="ctl00_ContentPlaceHolder1_lvStudent_ctrl9_lblStatus">Active</span>
    </td>
</tr>
</tbody>
</table>

Answer 1

If you had a container to restrict the search you could up the performance quite a bit, so this will work in all cases:

$("a, span").addClass(function() {
  switch($.text([this])) {
    case "Active": return "user-active";
    case "Inactive": return "user-inactive";
  }
});

But something like this would make it much faster, by narrowing it down to looking at only <a> and <span> elements you care about:

$("#TimeSheet").find("a, span").addClass(function() {
  switch($.text([this])) {
    case "Active": return "user-active";
    case "Inactive": return "user-inactive";
  }
});

We’re just using .addClass() in both cases to add the class based on the exact text, not a substring match. You could also map this in an object, for example:

var classes = { "Active":"user-active", "Inactive":"user-inactive" };
$("#TimeSheet").find("a, span").addClass(function() {
  return classes[$.text([this])];
});