我可以使用啥 jQuery 选择器来匹配这些 HTML 元素（需要“:contains()”）？

Posted 2023-03-06

【中文标题】我可以使用啥 jQuery 选择器来匹配这些 HTML 元素（需要“:contains()”）？

【英文标题】：What jQuery selector can I use to match these HTML elements (requires ":contains()")?我可以使用什么 jQuery 选择器来匹配这些 HTML 元素（需要“:contains()”）？

【发布时间】：2011-03-22 11:28:39

【问题描述】：

我正在尝试找到一个 jQuery 选择器，该选择器将仅匹配以下两个示例中直接包含文本“PDT”的元素（为简洁起见）：

<div>
  <p>
    <strong>(07-27) 21:28 PDT SAN FRANCISCO</strong> -- San Francisco
    supervisors ended more than a decade...
  </p>
  <p>The 10-1 vote, with only Supervisor Chris Daly dissenting</p>
</div>

和

<div>
  <p>(07-28) 08:59 PDT WASHINGTON --</p>
  <p>Orders to U.S. factories for big-ticket manufactured goods fell...</p>
</div>

在第一种情况下，这将是<strong>，在第二种情况下，第一个<p>。我正在寻找可以同时匹配两者的单个选择器，或者不会发现任何误报的多个选择器。

根据我的分析，我知道关于匹配元素的以下几点：

它们可以是 <p> 或 <strong> 元素 他们是父母的第一个孩子 它们包含文本“PDT” 他们没有孩子

鉴于所有这些属性，我认为应该有一个 jQuery 选择器，它可以高精度地找到这些元素，并且几乎没有误报。但是，我在将它们组合在一起时遇到了一些麻烦，因为我再也没有使用过这么复杂的选择器了。

我知道的工具是（每个都链接到文档）：

:contains(TEXT) :first-child :empty

我不确定最后一个是否有用 - 我只是更仔细地阅读了文档并注意到文本节点是由 :empty 选择器考虑的，所以我试图定位的 html 元素实际上并不是空的。但是，我可以相信它们只会包含一个文本节点，而不会包含其他任何内容。

我的第一枪是：

*:contains(PDT):first-child:empty

但这没有用。我尝试了其他几种变体，但我有点难过。谁能提供一些指导？

一个警告：我实际上并没有在我的脚本中使用 jQuery，而是它的 Sizzle 选择器引擎。因此，我需要尝试在一个选择器中完成所有这些操作，并且不能使用 .find() 和 .filter() 之类的 jQuery 方法。

提前感谢您的帮助！

【问题讨论】：

你为什么只使用 Sizzle？为什么不能在服务器端添加类什么的？

这段代码是一个主要新闻网站上使用的模块的一部分，所以我无法控制服务器，我们不能要求他们以任何方式更改他们的标记。我使用 Sizzle 而不是 jQuery 主要是为了减少代码重量（Sizzle 约为 5Kb，jQuery 约为 20K），因为我们的脚本每天有 1-2 百万次下载。

【参考方案1】：

使用所有标准，您可以：

试试看：http://jsfiddle.net/CKuYD/

var $result = $(':first-child:not(:has(*)):contains(" PDT ")');

注意“PDT”周围的空格。

如果它们包含文本、是第一个子标签并且没有任何其他子标签，则会返回。

【讨论】：

哇 +1 - 我无法想象自己会想出那个选择器。我可能会添加到选择器中的一件事是重复上面的 p 和 strong 前缀以满足第一个条件。

@Anurag - 同意，如果 OP 不在乎它需要多长时间，那么用特定的标签名称重复它可能会很好。 $('p:first-child:not(:has(*)):contains(" PDT "), strong:first-child:not(:has(*)):contains(" PDT ")'); 但坦率地说，" PDT " 周围有空格，我怀疑会有任何误报。

非常感谢。这就像一个魅力！根据 Anurag 的建议，我最终使用了更详细的选择器对 - 我认为在所有情况下我都不能指望 PDT 之后的尾随空格，所以额外的特异性应该会有所帮助。

【参考方案2】：

$('strong:contains("PDT"):first-child, p:contains("PDT"):first-child')

这显然可以根据 id 和上下文进行优化。

【讨论】：

谢谢，梅德！我最终选择了 patrick dw 的方法，因为它更具体，应该减少误报的机会。非常感谢您的帮助！