Finding the index of the first array element that contains a particular CSS class using native javascript

Question

I have a few buttons on a page who all share the .btn class, and only one at any particular time has another class, .selected, which changes.

In my javascript I've declared an array of elements with the .btn class:

var btn = document.querySelectorAll(".btn");

I'd like to get the index of the first (and in this case, only) occurrence of the element that also has the .selected class.

So far as I can tell, without using jQ, I should be able to find the index by using findIndex(), which requires a testing function. I can't seem to write that function though, because I am unsure how to test if an element from an array contains a particular class, without having a variable for the individual element.

Finding the index of the element with class in native Javascript -- This question from Nov '16 seems to ask nearly the same question but the top answer suggests using document.getElementByClass() which returns an array, not an index.

Test if an element contains a class? -- Here the answer appears to work for testing individual elements, but if I'm trying to iterate through an array without a loop (i.e. using something like findIndex()), I don't have a var to use the element.contains notation.

So more or less I'm trying to pass the index into another function:

someFunc(btn.findIndex(element.classList.contains("selected"));, but struggling to determine how to use the indexOf() method to find the location.

I'm obviously new to JS, so any and all help is appreciated!

Answer 1

Use Document#querySelector to get a single reference, and use as you're query .btn.selected, and if there are any other elements with .selected, or just .selected if it can be attached only to .btn:

console.log(document.querySelector(".btn.selected"));
console.log(document.querySelector(".selected"));

/** you can use the reference to change the button styling **/
document.querySelector(".selected").style.background = "green";

/** you can assign it to a variable to use multiple times **/
var selected = document.querySelector(".selected");
selected.style.border = "1px solid red";
selected.style.color = "white";

<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn selected">3</button>
<button class="btn">4</button>
<button class="btn">5</button>

If we really do want the index, use Document#querySelectorAll to get a list of btns, and use Array#findIndex to find the element that is equal to the one you got using Document#querySelector.

Since the list of nodes is not a true array, we need to convert it to an array (using Array#from for example), or use Function#call to invoke findIndex on it.

var btns = document.querySelectorAll('.btn');
var selected = document.querySelector(".selected");

var index = [].findIndex.call(btns, function(btn) {
  return btn === selected;
});

console.log(index);

<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn selected">3</button>
<button class="btn">4</button>
<button class="btn">5</button>