What jQuery selector can I use to match these HTML elements (requires ":contains()")?
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!
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.
$('strong:contains("PDT"):first-child, p:contains("PDT"):first-child')
This can obviously be optimized based on ids and context.
精彩评论