Does jQuery have something like the :any or :matches pseudo-class?

Question

I want to simplify my selector from:

'#a #b a[href^=mailto], .c .d a[href^=mailto]'

To:

':matches(#a #b, .c .d) a[href^=mailto]'

Is this possible just using jQuery selectors? Or do I have to do this:

$('#a #b, .c .d').find('a[href^=mailto]')

Which isn't as flexible.

Why do you think that the pseudo-classes should be in jQuery if they are not present at CSS specification? Why don't you take a look at jQuery documentation? http://api.jquery.com/category/selectors/ — Serg, Jan 24 '14 at 18:17
.find doesn't allow for other selectors (you can do direct child with `children` or descendent with `find`). And there are a whole class of selectors in jQuery that are not in css: http://api.jquery.com/category/selectors/jquery-selector-extensions/ — theazureshadow, Jan 26 '14 at 20:43
@theazureshadow, sorry for harsh comment. I just mean following: if similar issue is faced then digging into search, CSS specification and jQuery documentation -- 1) selector exists at jQuery but CSS _(Extensions is good)_; 2) selector exists at CSS but jQuery _(Good reason to open ticket at bug tracker)_; 3)selector doesn't exist at both _(it's a pity, ask for improvement)_. — Serg, Jan 27 '14 at 08:29
It seems the answer is that it doesn't exist. I can just be verbose while waiting for selectors level 4. http://dev.w3.org/csswg/selectors4/#matches — theazureshadow, Jan 27 '14 at 18:49

score 4 · Answer 1 · edited May 23 '17 at 10:27

jQuery does not provide a selector equivalent of :any()/:matches() (of which :any() was the original form and it was first implemented internally in Gecko and WebKit). You will indeed have to break up your selector strings and make separate method calls, if you are unable or unwilling to expand your selector.

Which method(s) you use depends on where exactly :matches() would appear in your selector:

If :matches() appears by itself in the beginning of the selector string, before any combinators, as in the question:
```
':matches(#a #b, .c .d) a[href^=mailto]'
```
Substitute $() where :matches() appears, and pass the remainder of the selector to .find(), .children(), .next() or .nextAll() depending on the combinator that follows :matches() (descendant, child, +, or ~ respectively).

Reproduced from the question:
```
$('#a #b, .c .d').find('a[href^=mailto]')
```
If :matches() appears by itself after a combinator, for example:
```
'#a #b > :matches(.c, .d)'
```
Substitute one of the above methods where :matches() appears:
```
$('#a #b').children('.c, .d')
```

If :matches() appears as part of another compound selector, for example:

':matches(#a #b, .c .d) a[href^=mailto]:matches(.e, .f)'

Substitute .filter() where that :matches() appears:

$('#a #b, .c .d').find('a[href^=mailto]').filter('.e, .f')

Code Maverick · Answer 2 · 2014-01-24T18:37:04.287

1

They have .has() which reduces the set of matched elements to those that have a descendant that matches the selector or DOM element.

So this would return the parent objects that have an anchor with an href beginning with mailto:

$('#a #b, .c .d').has('a[href^=mailto]');

But as far as selecting the anchors themselves, your last option, find(), is best. It essentially is what would be called anyway under the covers from any other method.

$('#a #b, .c .d').find('a[href^=mailto]');

edited Jan 24 '14 at 18:37

answered Jan 24 '14 at 18:08

Code Maverick

20,171
12
62
114

I think he's trying to get `a[href^=mailto]`, not their parents. – Jeromy French Jan 24 '14 at 18:09
1

@JeromyFrench - That's true, I read it too fast. I've updated to clarify. – Code Maverick Jan 24 '14 at 18:18

score 1 · Answer 3 · answered Jan 24 '14 at 18:17

if you are looking for all a[href^=mailto], then

$('a[href^=mailto]')....

AND

$('* a[href^=mailto]')....

OR if they have a "universal" selector/parent

$('selector * a[href^=mailto]')....

otherwise:

$('#a #b, .c .d').find('a[href^=mailto]') as you wrote in your question

Felix · Answer 4 · 2014-01-24T18:23:12.137

0

There's no selector like you mention in jQuery at this moment.

Seem like your last selectors is the most simplified way already, if anything can do to shorten than only:

$('#b, .c .d').find('a[href^=mailto]')

If you require #b as the descendent of #a, then there's no way to shorten your selector IMO

edited Jan 24 '14 at 18:23

answered Jan 24 '14 at 18:07

Felix

37,892
8
43
55

2

What if he only wants `#b` if it's a descendent of `#a`? – Jeromy French Jan 24 '14 at 18:11
1

I'm saying that `$('#a #b')` (give me the *descendant of #a* that has an id of b), is not the same thing as `('#b')` (give me #b). – Jeromy French Jan 24 '14 at 18:19
"There's no selector" is what I was looking for. But the second part of your answer doesn't seem useful. If you remove it, I will accept this answer. – theazureshadow Jan 27 '14 at 18:51

Does jQuery have something like the :any or :matches pseudo-class?

4 Answers4

Linked