Как найти элементы, которые соответствуют нескольким условиям

Question

Что мне нужно сделать, это найти все элементы на странице, которые содержат "тег" в свойстве href, а текст элемента содержит определенное слово.

Например

<a href="/my/tag/item2">cars</a>

Я знаю, что могу получить все элементы с тегом в href следующим образом:

$("a[href*=tag]");

Я также могу найти все элементы с 'автомобили' в тексте, как это:

$("a:contains('cars')");

Но как мне объединить эти 2 условия в одно утверждение, которое гласит: Найти все элементы, которые содержат "tag" в href и содержат "cars" в тексте?

Answer 1

Ты пытался $("a[href*=tag]:contains('cars')");?

Вы можете продолжать и продолжать в том же духе, то есть

$("a.className.anotherClass[href*=tag][title=test]:contains('cars'):visible");

Answer 2

Как сказали другие парни, или, если два условия необходимо применять отдельно, например, с некоторым другим кодом между ними, то...

var $tags = $("a[href*=tag]");

тогда позже...

var $carTags = $tags.filter(":contains('cars')");

.filter() является обобщенным методом сокращения существующего выбора jQuery.

Как и многие другие методы jQuery .filter() возвращает объект jQuery, поэтому он будет цепочкой:

var $foo = $("a[href*=tag]").filter(":contains('cars')").filter(".myClass");

.filter() это также хорошо по причинам, которые я не собирался объяснять, и мне это не нужно, потому что @bažmegakapa только что сделал это очень красноречиво.

Answer 3

Другие ответы показывают хорошие и рабочие примеры. Но здесь есть интересная причуда - различие между собственными селекторами CSS (которые также поддерживаются родными querySelectorAll()) и селекторы, определенные jQuery.

Смешивать их может не повезло, потому что тогда гораздо более быстрый нативный движок не может быть использован. Например на :has() состояние документов JQuery:

Поскольку:has() является расширением jQuery и не является частью спецификации CSS, запросы с использованием:has() не могут воспользоваться преимуществами повышения производительности, обеспечиваемыми собственным методом DOM querySelectorAll().

По этой причине вам лучше выполнить запрос с помощью встроенного метода, а затем выполнить фильтрацию с использованием любых специфичных для jQuery селекторов:

var $res = $("a[href*=tag]").filter(":contains('cars')");