Question

我有以下生成的HTML，我想从客户端使用jQuery为它们添加一些CSS类。

我想将CSS类“user-active”添加到以下带有“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>

我想将CSS类“用户非活动”添加到以下标记为“非活动”的“”标记中

<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])];
});

将CSS类添加到生成的<a> and <span> tag by their text</span></a>

1 个答案: