添加CSS類生成<a>和<span>標記的文本

Question

我有以下泛型的HTML，我想從客戶端添加一些CSS類使用jQuery。

我想添加CSS類「用戶激活」下面的「」標籤具有文本「活動」

<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> 

我想添加CSS類「用戶停用」到以下帶有文字「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> 

謝謝。

容器內

更新HTML輸出：

<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

如果你有一個容器，以限制搜索你可以達到的性能相當多，因此這將適用於所有情況：

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

但是，像這樣的事情會使它更快地通過縮小到，只能看到你關心的<a>和<span>元素：

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

我們只是在這兩種情況下使用.addClass()基礎上，確切文本，而不是一個字符串匹配要添加的類別。您也可以將其映射到一個對象中，例如：

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