Jquery Index In Vanilla Javascript

Imagine you're diving deep into the world of web development, ready to tackle the wonders of JavaScript. But wait, you've heard about jQuery and its magical powers for simplifying things. Now, you may be wondering, can you use some of that jQuery goodness like the `index` function in vanilla JavaScript? Well, buckle up, because we're about to guide you through how you can achieve similar functionality in plain old JavaScript.

In jQuery, the `index` function returns the index of the first occurrence of an element within the selected elements. It comes in handy when you need to know the position of an element relative to its siblings. But fear not, JavaScript has got your back with the `indexOf` method on arrays, which can serve a similar purpose.

Let's break it down step by step. Say you have an array of elements and you want to find the index of a specific element. Here's how you can do it using plain JavaScript:

const elements = ['apple', 'banana', 'orange', 'grape'];
const elementToFind = 'orange';

const index = elements.indexOf(elementToFind);

console.log(index); // Output: 2

In this example, we first create an array of fruits. Then, we use the `indexOf` method to find the index of the element 'orange' within the array. The method returns the index, which in this case is `2` since arrays are zero-indexed in JavaScript.

But what if you have a collection of HTML elements and you want to find the index of a specific element within this collection? Fear not, we've got you covered there too!

<div id="parent">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</div>

In this setup, if you want to find the index of a specific `

const parent = document.getElementById('parent');
const childToFind = parent.children[1];

const index = Array.from(parent.children).indexOf(childToFind);

console.log(index); // Output: 1