Question

$('#servertable td:eq(' + server + ')')

这只找到1（我认为首先）匹配，如何找到所有匹配。顺便说一句。 td：包含对我不起作用。

Answer 1

eq期望数字索引仅返回单行。如果要根据内容匹配td，则必须使用:contains选择器。说“它不起作用”并抛弃它不是解决问题的正确方法，因为选择器（很可能）没有错（请注意它的区分大小写，可能是它......）

无论如何，如果你有这样的表：

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
  <tr>
    <td>World</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

这个jQuery代码：

$(function() {
    $("td:contains('Hello')").css('color','red');
});

将“Hello”的所有单元格变为红色。 Demo

如果您需要不区分大小写的匹配，可以使用filter函数执行此操作：

$(function() {
    var search = 'HELLO'.toLowerCase();
    $("td").filter(function() {
        return $(this).text().toLowerCase().indexOf(search) != -1;
    }).css('color','red');
});

如果您需要匹配单元格的完全内容，您可以使用与上述类似的内容：

$(function() {
    var search = 'HELLO'.toLowerCase();
    $("td").filter(function() {
        return $(this).text().toLowerCase() == search;
    }).css('color','red');
});

以上是不区分大小写的（通过在比较时将搜索和内容都转换为小写），否则如果您想要区分大小写，则可以删除它们。 Demo

Answer 2

我可能错了，但:eq positional selector取整数 n 找到 nth 匹配元素。

所以如果你说td：eq（1） - 你会得到表中的第二个TD元素（第二个因为第一个索引是零/ 0）。

我的猜测是你不想使用:contains selector因为你正在寻找一个精确的字符串匹配而不想要部分匹配。

我不知道jquery有一个内置的选择器可以满足你的需求（如果有的话，请纠正我）。您可以添加一个作为扩展名或使用其他方法，例如属性选择器来搜索您。

如果您能够控制生成的HTML，您可以为每个TD添加ID属性，如下所示：

   <table id="servertable" border="1">
        <thead>
            <tr><th>Server</th><th>Memory</th></tr>
        </thead>
        <tbody>
            <tr><td id="server_mars">Mars</td><td>4 GB</td></tr>
            <tr><td id="server_venus">Venus</td><td>1 GB</td></tr>
            <tr><td id="server_jupiter">Jupiter</td><td>2 GB</td></tr>
            <tr><td id="server_uranus">Uranus</td><td>8 GB</td></tr>
            <tr><td id="server_mars_2010">Mars_2010</td><td>4 GB</td></tr>
        </tbody>
    </table>
    <form>
        <label for="server">Find:</label><input type="text" id="server" />
        <button id="find">Find</button>
    </form>

以下属性选择器将在表中找到正确的TD：

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function() {
        $("#find").click(function() {
            var server = $("#server").val();
            $("#servertable td").css("background-color", "");  // reset 
            $("#servertable td[id='server_" + server.toLowerCase() + "']").css("background-color", "#FFFF00");  
            return false;
        });
    });
   </script>

如果您想要定位具有您正在寻找的TD的整行，您可以添加其他选择器：

      $("#servertable tbody tr").css("background-color", "");
      $("#servertable tbody tr:has(td[id='server_" + server.toLowerCase() + "'])").css("background-color", "#FFFF00");

tbody标签不是完全必要的，它只是有助于区分表体中的行和表头中的行。

Answer 3

尝试：containsExact

http://wowmotty.blogspot.com/2010/05/jquery-selectors-adding-contains-exact.html

    $.extend( $.expr[":"], {
 containsExact: $.expr.createPseudo ?
  $.expr.createPseudo(function(text) {
   return function(elem) {
    return $.trim(elem.innerHTML.toLowerCase()) === text.toLowerCase();
   };
  }) :
  // support: jQuery <1.8
  function(elem, i, match) {
   return $.trim(elem.innerHTML.toLowerCase()) === match[3].toLowerCase();
  },

 containsExactCase: $.expr.createPseudo ?
  $.expr.createPseudo(function(text) {
   return function(elem) {
    return $.trim(elem.innerHTML) === text;
   };
  }) :
  // support: jQuery <1.8
  function(elem, i, match) {
   return $.trim(elem.innerHTML) === match[3];
  },

 containsRegex: $.expr.createPseudo ?
  $.expr.createPseudo(function(text) {
   var reg = /^\/((?:\\\/|[^\/]) )\/([mig]{0,3})$/.exec(text);
   return function(elem) {
    return RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML));
   };
  }) :
  // support: jQuery <1.8
  function(elem, i, match) {
   var reg = /^\/((?:\\\/|[^\/]) )\/([mig]{0,3})$/.exec(match[3]);
   return RegExp(reg[1], reg[2]).test($.trim(elem.innerHTML));
  }

});

Answer 4

$('#servertable td')

会找到所有td元素，但并不完全清楚你的期望。

Answer 5

我也遇到了和原作者一样的问题。正如保罗原来提出的问题一样。我可以使用哪个选择器来匹配基于元素内容的相等检查元素。至少我认为他所做的事情（就像我一样）试图实现，这也可以解释为什么他（以及我）不能使用包含ra170在他的评论中指出的明显原因。无论如何，如果有人偶然发现在这里寻找这个问题的答案，这就是答案：

jQuery默认没有这样的匹配器。解决方案是定义自己的匹配器。要解决手头的问题，请参阅Motte的这篇优秀博客post。

jquery找到所有确切的td匹配

5 个答案: