How to find an element’s index In container with JavaScript?

To find an element’s index within a container in JavaScript, you can use the indexOf() method if the container is an array or the childNodes property if the container is a DOM element.

For example,

1. If the container is an array:

var container = ["element1", "element2", "element3", "element4"];

var elementToFind = "element3";
var index = container.indexOf(elementToFind);

if (index !== -1) {
    console.log("The index of " + elementToFind + " is: " + index);
} else {
    console.log("Element not found in the container.");
}

2. If the container is a DOM element:

var container = document.getElementById("container");

var elementToFind = document.getElementById("elementToFind");

var index = Array.prototype.indexOf.call(container.childNodes, elementToFind);

if (index !== -1) {
    console.log("The index of the element is: " + index);
} else {
    console.log("Element not found in the container.");
}

In the second example, childNodes property returns a collection of a node’s child nodes as a NodeList object. We then use indexOf() method to find the index of the desired element within this NodeList.

Please note that indexOf() returns -1 if the element is not found in the array or NodeList. Therefore, we check if the index is not -1 before proceeding.