CODEWITHSUNDEEP
javascriptselectors-api
Doug Fir
Doug Fir

Reputation: 21322

querySelector() combine multiple attribute selectors

I have a input field with class of this format:

some_starting_constant_string somevariablestring some_ending_constant_string

So I want a querySelector that uses a combination of starts with and ends with:

document.querySelectorAll("input[class^='some_starting_constant_string' AND class$='some_ending_constant_string']

Is this possible? Combining a starts with and ends with rule?

Upvotes: 2

Views: 9389

Answers (2)

Kaiido
Kaiido

Reputation: 137171

You just have to separate both attribute selectors :

input[class^='some_starting_constant_string'][class$='some_ending_constant_string']

console.log(
  document.querySelectorAll("[class^='start'][class$='end']")
)
<div class="start__end"></div>
<div class="start_heretoo_end"></div>
<div class="sta__end"></div>
<div class="rt__end"></div>
<div class="start__d"></div>

Upvotes: 9

user7212232
user7212232

Reputation: 125

This is a way to do it so element return are in a specific order

querySelectorOrdered =(...selectors)=> {

    let arrOut = [];

    for(let i = 0; i < selectors.length; i++)
    {
      arrOut.push(...document.querySelectorAll(selectors[i]));
    }

   return arrOut;
 }

reference: vb6code.com/code-javascript-queryselectorall-ordered.php

Upvotes: 0

Related Questions