Какой селектор jQuery я могу использовать для соответствия этим HTML-элементам (требуется ": contains ()")? - PullRequest
Новая
       22

Какой селектор jQuery я могу использовать для соответствия этим HTML-элементам (требуется ": contains ()")?

2 голосов
/ 29 июля 2010

Я пытаюсь найти селектор 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. Поэтому мне нужно попытаться сделать все это в одном селекторе, и я не могу использовать такие методы jQuery, как .find () и .filter ().

Заранее спасибо за любую помощь!

Ответы [ 2 ]

5 голосов
/ 29 июля 2010

Используя все ваши критерии, вы можете сделать:

Попробуйте: http://jsfiddle.net/CKuYD/

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

Обратите внимание на пробелы вокруг "PDT".

Возвращается, если они содержат текст, являются первыми дочерними и не имеют никаких других дочерних тегов.

1 голос
/ 29 июля 2010 
$('strong:contains("PDT"):first-child, p:contains("PDT"):first-child')

Очевидно, что это можно оптимизировать на основе идентификаторов и контекста.

...