jquery找到所有確切的td匹配

Question

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

這找到只有1（首先我認爲）匹配，如何找到所有匹配。 btw。 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。如果您需要匹配單元的確切內容

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

，你可以使用類似的東西：

如果您需要區分大小寫的比賽，你可以這樣做，用filter功能以上：

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

以上是不區分大小寫（通過轉動兩個搜索和比較時爲小寫的內容），否則你可以刪除這些，如果你想區分大小寫。 Demo。

Answer 2

$('#servertable td') 

會找到所有的td元素，但它並不完全清楚你的期望。

Answer 3

我可能是錯的，但:eq positional selector取整數ň的發現第n個匹配的元素。所以如果你說td：eq（1） - 你會得到表中的第二個TD元素（第二個因爲第一個索引是零/ 0）。

我的猜測是你不想使用:contains selector，因爲你正在尋找一個精確的字符串匹配，並且不想部分匹配。

我不知道，jquery有一個內置的選擇器，將滿足您的需求（如果是這樣，請糾正我）。您可以添加一個作爲擴展或使用其他方法，例如屬性選擇器來爲您執行搜索。

如果你能夠控制生成的HTML，你可以一個ID屬性添加到每個TD像這樣：

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

我也遇到了與原作者一樣的問題。正如保羅所做的原始問題一樣。我可以使用哪個選擇器來匹配基於元素內容的基於相等性檢查。至少我認爲他是這麼做的（正如我）試圖達到的那樣，這也解釋了爲什麼他（以及我）不能使用包含，因爲ra170在他的評論中指出了顯而易見的原因。無論如何，如果有人碰巧遇到這個問題的答案，這裏的答案很簡短：

jQuery在默認情況下沒有這樣的匹配器。解決方案是定義你自己的匹配器。要解決手頭的問題，請參閱Motte的優秀博客post。

Answer 5

嘗試：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)); 
    } 

});