CODEWITHSUNDEEP
javascriptstring-matchingselectors-api
goamn
goamn

Reputation: 2146

Native Javascript querySelectorAll() with multiple/many pseudo selectors/matches

How can I place many pseudo selectors inside the native Javascript querySelectorAll()?

Example: I want to search for an element with an id that starts with [id^=starting] and ends with [id$=ending]. (Couldn't find existing question so making my own and answering it)

Upvotes: 3

Views: 5519

Answers (2)

Radu Linu
Radu Linu

Reputation: 1271

If you need to query for the elements starting with a string or with another string, you have to use the following structure:

document.querySelectorAll('[id ^= "startingString-"], [id ^= "anotherStartingString-"]')

Upvotes: 0

goamn
goamn

Reputation: 2146

With Native Javascript this would be the code:

document.querySelectorAll('[id^=starting][id$=ending]');

or

document.querySelectorAll('[id^='+startingString+'][id$='+endingString+']');

This will get an element which starts with the specified string AND ends with the specified string.

Edit: And to do an "OR", put a space between them:

document.querySelectorAll('[id^=starting] [id$=ending]');

Upvotes: 9

Related Questions