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

发布于 2024-09-12 02:05:34 字数 1724 浏览 13 评论 0原文

我试图找到一个 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>

在第一种情况下,这将是 ;,在第二种情况下,第一个

。我正在寻找一个与两者匹配的单个选择器,或多个不会发现任何误报的选择器。

通过我的分析,我知道有关匹配元素的以下信息:

  • 它们可以是

    元素,

  • 它们是他们的父母的第一个孩子
  • 他们包含文本“PDT”
  • 他们没有孩子

考虑到所有这些属性,我认为应该有一个 jQuery 选择器能够高精度地找到这些元素,并且几乎没有误报。但是,我在将其组合在一起时遇到了一些麻烦,因为我不再使用如此复杂的选择器。

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

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

我的第一枪是:

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

但这没有用。我尝试过其他几种变体,但我有点困惑。有人可以提供一些指导吗?

需要注意的是:我实际上并没有在我的脚本中使用 jQuery,而是使用它的 Sizzle 选择器引擎。因此,我需要尝试在一个选择器中完成这一切,并且我不能使用 .find() 和 .filter() 等 jQuery 方法。

预先感谢您的任何帮助!

I'm trying to find a jQuery selector that will match only the element that directly contains the text "PDT" in the following two examples (truncated for brevity):

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

and

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

In the first case, this would be the <strong>, and in the second case, the first <p>. I'm looking for a single selector that would match both, or multiple selectors that wouldn't find any false positives.

By my analysis, I know the following things about the elements that would match:

  • they can either be a <p> or a <strong> element
  • they're the first child of their parent
  • they contain the text "PDT"
  • they have no children

Given all of these attributes, I think there should be a jQuery selector that will find these elements with high accuracy, and few to no false positives. However, I'm having some trouble putting one together, as I haven't used a selector this complex anymore.

The tools I'm aware of are (each linked to documentation):

I'm not sure if the last one will be useful - I just read the documentation more carefully and noticed that text nodes are considered by the :empty selector, so HTML elements that I'm trying to target aren't actually empty. However, I can rely on the fact that they'll only contain one text node, and nothing else.

My first shot was:

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

but that didn't work. I've tried several other variations, but I'm kind of stumped. Can anyone offer some guidance?

One caveat: I'm not actually using jQuery in my script, but rather its Sizzle selector engine. Therefore, I need to try to do this all in one selector, and I can't use jQuery methods like .find() and .filter().

Thanks in advance for any help!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

野心澎湃 2024-09-19 02:05:35

使用您的所有标准,您可以执行以下操作:

尝试一下: http://jsfiddle.net/ CKUYD/

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

注意“ PDT ”周围的空格。

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

Using all your criteria, you could do:

Try it out: http://jsfiddle.net/CKuYD/

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

Note the spaces around " PDT ".

This will return if they contain the text, are a first-child, and don't have any other child tags.

南渊 2024-09-19 02:05:35
$('strong:contains("PDT"):first-child, p:contains("PDT"):first-child')

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

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

This can obviously be optimized based on ids and context.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文