为什么 jQuery 的 :contains 在我的代码中计数异常？

Question

我有一个带有两个参数的函数：第一个是要计数的字符串，第二个是 HTML 元素的 ID，该函数应该在其中计算该字符串的出现次数。

function countString(searchString, elementToSearchIn) {
    return $("#"+elementToSearchIn+" *:contains("+searchString+")").length;
    // In this example, call will be $("#searchElement *:contains('Apple')").length;
}

<table id="searchElement" border="1">
  <tr>
    <th>Apple</th>
    <th>Apple</th>
    <th>Banana</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Orange</td>
    <td>Banana</td>
  </tr>
</table>

我设置了一个小的 fiddle 来演示问题：例如，我的 table 中有 3 次 "Apple"，但是 countString returns 6 .

为什么我的函数没有返回正确的计数？

https://jsfiddle.net/v10swbff/

Answer 1

问题是*:contains匹配TD，TH AND TR。所以它计数为 6（每个 TR 一个，然后是预期的 TH 和 TD 计数）。要修复它，您可以像这样分别检查 TH 和 TD：

function countString(searchString, elementToSearchIn) {
    var thCount = $("#"+elementToSearchIn+" th:contains("+searchString+")").length;
    var tdCount = $("#"+elementToSearchIn+" td:contains("+searchString+")").length;
    return thCount + tdCount;
}

已更新 JSFiddle：https://jsfiddle.net/v10swbff/1/

Answer 2

正如Cymen所说，就是在搜索中匹配tr元素。我建议您可以使用另一个功能：

function countString(searchString, elementToSearchIn) {
    return $("#"+elementToSearchIn+" tr>*:contains("+searchString+")").length;
}

只需添加 'tr>'，您将只找到 th 和 td。 :)

为什么 jQuery 的 :contains 在我的代码中计数异常？

Why does jQuery's :contains count unexpected in my code?

javascript

jquery

jquery-selectors