添加基于字母的类

时间:2018-03-01 13:39:47

标签: javascript jquery html

我想在“td字段”中添加一个额外的类,当它只有字母“A”或“B”时。 现在它添加了“big-a”和“big-b”类,如果单词里面有一个或两个字母。

$(".column-1").addClass(function() {
var text = $(this).text();
if (~text.indexOf("A")) {
    return "big-a";
} else if (~text.indexOf("B")) {
    return "big-b";
}

});

<div class="data">
<table>
    <tr class="row-1 odd" role="row">
        <td class="column-1">A</td>
    </tr>
    <tr class="row-2 odd" role="row">
        <td class="column-1">Adidas</td>
    </tr>
    <tr class="row-3 odd" role="row">
        <td class="column-1">Accoss</td>
    </tr>
    <tr class="row-4 odd" role="row">
        <td class="column-1">B</td>
    </tr>
    <tr class="row-5 odd" role="row">
        <td class="column-1">Blues</td>
    </tr>
    <tr class="row-6 odd" role="row">
        <td class="column-1">Business</td>
    </tr>        
</table>

链接到JSfiddle:https://jsfiddle.net/petersenhp/bwcehumc/6/

4 个答案:

答案 0 :(得分:2)

使用平等而不是.indexOf(),因为您正在寻找A,而不是包含 A

$(".column-1").addClass(function() {
    var text = $(this).text();
    if (text === "A") {
        return "big-a";
    } else if (text === "B") {
        return "big-b";
    }
});

如果你重新编写你的HTML,你可以在没有任何JS的情况下做到这一点。

&#13;
&#13;
tr:first-child td {
  font-size: 20px;
}

.column-1 {
  font-size: 14px;
}
&#13;
<div class="data">
  <table>
    <tbody>
      <tr class="row-1 odd" role="row">
        <td class="column-1">A</td>
      </tr>
      <tr class="row-2 odd" role="row">
        <td class="column-1">Adidas</td>
      </tr>
      <tr class="row-3 odd" role="row">
        <td class="column-1">Accoss</td>
      </tr>
    </tbody>
    <tbody>
      <tr class="row-4 odd" role="row">
        <td class="column-1">B</td>
      </tr>
      <tr class="row-5 odd" role="row">
        <td class="column-1">Blues</td>
      </tr>
      <tr class="row-6 odd" role="row">
        <td class="column-1">Business</td>
      </tr>
    </tbody>
    <tbody>
      <tr class="row-4 odd" role="row">
        <td class="column-1">C</td>
      </tr>
      <tr class="row-6 odd" role="row">
        <td class="column-1">Citrus</td>
      </tr>
    </tbody>
  </table>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

 && text.length == 1

将此添加到条件中以确保文本中只有一个字符。

答案 2 :(得分:0)

只是不要使用正则表达式:

$(".column-1").addClass(function() {
    var text = $(this).text();
    if (text=="A") {
        return "big-a";
    } else if (text=="B") {
        return "big-b";
    }
});

答案 3 :(得分:0)

我认为你想为字母表中的每一个字母都这样做,所以你可以这样做,避免重复:

/// busysleep(ms)
var t = current_time + argument0;
while (current_time < t) { }