添加基于字母的类

Question

我想在“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/

Answer 1

使用等于而不是.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的情况下做到这一点。

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

.column-1 {
  font-size: 14px;
}

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

Answer 2

 && text.length == 1

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

Answer 3

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

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

Answer 4

我认为你想为字母表中的每个字母做这个，所以你可以这样做，避免重复：

$(".column-1").addClass(function() {
    var text = $(this).text();
    if (text.length === 1 && (/[A-Z]/).test(text)) {
        return "big-" + text.toLowerCase();
    }
});