我可以使用什么jQuery选择器来匹配这些HTML元素(需要“:contains()”)?

时间:2010-07-29 00:27:21

标签: jquery css jquery-selectors css-selectors sizzle

我正在尝试找到一个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选择器,可以高精度地找到这些元素,几乎没有误报。但是,我把它放在一起时遇到了一些麻烦,因为我还没有使用这个复合体的选择器。

我所知道的工具(每个都链接到文档):

我不确定最后一个是否有用 - 我只是更仔细地阅读文档并注意到文本节点被:empty选择器考虑,因此我试图定位的HTML元素实际上并不是空。但是,我可以依赖它们只包含一个文本节点的事实,而不是其他任何内容。

我的第一枪是:

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

但这不起作用。我尝试了其他几种变化,但我有点难过。任何人都可以提供一些指导吗?

一个警告:我实际上并没在我的脚本中使用jQuery,而是使用它的Sizzle选择器引擎。因此,我需要尝试在一个选择器中执行此操作,并且我不能使用.find()和.filter()等jQuery方法。

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:5)

使用您的所有条件,您可以:

试一试: http://jsfiddle.net/CKuYD/

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

请注意“PDT”周围的空格。

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

答案 1 :(得分:1)

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

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