Question

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

• :contains(TEXT)
• :first-child
• :empty

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!

Answer 1

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.