Question

我正在尝试更改颜色，其中第一个td包含Test1个单词，此处可以更改颜色。但是，当我将test1放在此处进行编码时，不会改变颜色。有没有办法包含小写或大写单词？

$("#X td:contains('Test1')").parents('tr').find("td:first").css("background-color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="X">
  <tr>
    <td>Test1</td>
    <td>Test2</td>
    <td>Test3</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

Answer 1

您可以将regex与// $("#X td:contains('/test1/i')").parents('tr').find("td:first").css("background-color", "red"); const matchTEST = /test/i; $('#X td').filter((i, e) => matchTEST.test(e.innerText)).parent('tr').find("td:first").css("background-color", "red");一起使用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "X">
  <tr >
    <td>matchTEST</td>
    <td>Test2</td>
    <td>Test3</td>
  </tr>
  <tr >
    <td>a</td>
    <td>a</td>
    <td>a</td>
  </tr>
  <tr >
    <td>matchTEST</td>
    <td>c</td>
    <td>c</td>
  </tr>
</table>

A.FORWARD

Answer 2

您可以结合使用:contains和:first

$("#X td:contains(Test1):first, #X td:contains(test1):first").css('color','red');

$("#X td:contains(Test1):first, #X td:contains(test1):first").css('color','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "X">
        <tr >
        <td>test1</td>
        <td>Test2</td>
        <td>Test3</td>
        </tr>
        <tr >
        <td></td>
        <td></td>
        <td></td>
        </tr>
     
        <tr >
        <td>a</td>
        <td>b</td>
        <td>c</td>
        </tr>
   </table>

`

Answer 3

您可以使用不区分大小写的正则表达式的javascript函数来过滤元素

var re = /test1/i;
$("#X td")
  .filter((i, el) => re.test(el.innerHTML))
  //.parents('tr').find("td:first")
  .css("background-color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="X">
  <tr>
    <td>nope</td>
    <td>test1</td>
    <td>Test1</td>
    <td>test2</td>
    <td>protest1</td>
  </tr>
</table>

Answer 4

您可以覆盖jQuery包含以使其不区分大小写：

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

$("#X td:contains('Test3')")
.parents('tr')
.find("td:first")
.css("background-color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="X">
  <tr> <td>test1</td>  <td>test2</td> <td>test3</td>  </tr>
  <tr> <td></td> <td></td> <td></td> </tr>
  <tr> <td>a</td> <td>b</td>  <td>c</td> </tr>
</table>

表TD颜色不变

4 个答案: