Javascript function element index

Get index of clicked element using pure javascript

Here is a piece of code that can help you get the index of the clicked element inside the for loop. All you need is a new scope:

var g = document.getElementById('my_div'); for (var i = 0, len = g.children.length; i < len; i++) < (function(index)< g.children[i].onclick = function()< alert(index) ; >>)(i); > 

Edit 1: Incorporating user Felix Kling’s comments into the answer.

event handler already is a closure

Edit 2: Updated fiddle link

@rohan-patel That is odd. Here is a newer fiddle: jsfiddle.net/gffwse8q (tested in Chrome and Safari).

See my second answer on this page, this solution is far for optimal. stackoverflow.com/questions/8801787/…

The accepted answer (from Ashwin Krishnamurthy) is actually far from optimal.

const g = document.getElementById('my_div'); for (let i = 0, len = g.children.length; i < len; i++) < g.children[i].onclick = function()< alert(index) ; >> 

to avoid creating unnecessary closures. And even then it’s not optimal since you’re creating 6 DOM event handlers (6 divs in the example above) just to get a number of a single clicked div .

What you should actually do is use an event delegation (attach single click event to the parent) and then check the e.target ‘s index using the method I’ve mentioned earlier and above (Get index of clicked element using pure javascript).

Источник

How to find the index of an array element in JavaScript

The index of an array element represents the position of the element in the array. The index number can be retrieved by using the indexOf(), lastIndexOf(), and findIndex() methods. All of these methods are used for tracing the index of array elements. This guide provides an insight into the possible methods that can be used to get the index number of a specific element in an array. The following learning outcomes are expected when you go through this article:

• indexOf() method in JavaScript
• lastIndexOf() method in JavaScript
• findIndex() method in JavaScript

How to find the index of an array element in JavaScript

The array element can be traced by using the indexOf(), lastIndexOf(), and findIndex() methods. This section provides the working of each method with examples.

How to find the index of an array element using the indexOf() method

The indexOf() method traces the first occurrence of a specific element and returns the index.

• The array(or an array itself) refers to the array variable where the element would be traced for an index number.
• The start value represents an index number from where the indexOf() method will start searching.

The start value can be set to negative or positive.

• If the value is positive, then the indexOf() method would start from that index.
• If the value is negative then the search would start after calculating the following expression. (length of array + (negative value)).

Example

The usage of the indexOf() method is described to get the index of a specific element in an array variable.

arr = [ «apple» , «guava» , «banana» , «peach» , «banana» ] ;

console. log ( arr. indexOf ( «banana» ) ) ;

console. log ( arr. indexOf ( «banana» , — 1 ) ) ;

The above code creates an array. We have used the indexOf() method on the “banana” element of that array . The first method traces the banana element and returns the index number of its first occurrence. Whereas the second indexOf() method takes -1 for starting value, the sorting will start from index=(4+ (-1)=3).

The output shows the index of the first occurrence of “banana” without any starting condition and the second method takes the starting condition “-1” and will start the index counting from (4+(-1)).

How to find the index of an array element using the lastIndexOf() method

As the name of this method represents, it would return the last occurrence of an element.

The syntax is described as, the array is an array variable (or array itself) and the element is contained inside it.

Example

Here, the lastIndexOf() method is applied to get the index of a specific element

num = [ 3 , 4 , 3 , 5 , 9 , 3 , 12 ] ;

console. log ( num. lastIndexOf ( 3 ) ) ;

console. log ( num. lastIndexOf ( 30 ) ) ;

The above code creates a numeric array and the lastIndexOf() method is applied to that array to trace the last index of “3“. Additionally, we have applied the lastIndexOf() method on a number “30” (that does not belong to an array).

The output shows that the last index number of an element “3” is “5” and as the number “30” does not belong to the array, the result is “-1“.

How to find the index of an array element using the findIndex() method

By using findIndex(), you will be able to get the index of an element that meets the criteria you specified. Once an element satisfies the function(criteria), the findIndex() method stops executing and returns the index of that element only.

The findIndex() method accepts two arguments, one is a function (a test function to run on each element until any element satisfies the condition) and the other is This-Value.

The function accepts the following parameters

Current-Value: It refers to the value of a current element

Index: This is an optional parameter and represents the index of the current element

Arr: Refers to the array of the current element

Example

The following JS code executes the findIndex() method to get the index number of an element that satisfies the condition.

console. log ( ( num. findIndex ( find ) ) ) ;

In the above code, an array named “num” is initialized and the find() function is applied on each element of num, and it returns values greater than 10. After that, the “find()” method is called from the “findIndex()” function to get the index of the first element that is greater than “10“.

The “find()” method returns all the numbers that are greater than “10” and the “findIndex()” method picks only the index of the first number (that is 20 in our case).

Conclusion

JavaScript provides various methods such as indexOf(), lastIndexOf(), and findIndex() methods to get the index number of an element in an array. This guide provides syntaxes and the working of each above-mentioned method. To get the first occurrence index of an element, the indexOf() method is used. However, the lastInexOf() would give you the index of the last occurrence of any specific element. As opposed to those methods, findIndex() returns the index number of the first element that satisfies a given function (which is passed as a parameter to findIndex()).

Источник

Array.prototype.findIndex()

The findIndex() method returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

See also the find() method, which returns the first element that satisfies the testing function (rather than its index).

Try it

Syntax

findIndex(callbackFn) findIndex(callbackFn, thisArg) 

Parameters

A function to execute for each element in the array. It should return a truthy value to indicate a matching element has been found, and a falsy value otherwise. The function is called with the following arguments:

The current element being processed in the array.

The index of the current element being processed in the array.

The array findIndex() was called upon.

A value to use as this when executing callbackFn . See iterative methods.

Return value

The index of the first element in the array that passes the test. Otherwise, -1 .

Description

The findIndex() is an iterative method. It calls a provided callbackFn function once for each element in an array in ascending-index order, until callbackFn returns a truthy value. findIndex() then returns the index of that element and stops iterating through the array. If callbackFn never returns a truthy value, findIndex() returns -1 .

callbackFn is invoked for every index of the array, not just those with assigned values. Empty slots in sparse arrays behave the same as undefined .

findIndex() does not mutate the array on which it is called, but the function provided as callbackFn can. Note, however, that the length of the array is saved before the first invocation of callbackFn . Therefore:

• callbackFn will not visit any elements added beyond the array’s initial length when the call to findIndex() began.
• Changes to already-visited indexes do not cause callbackFn to be invoked on them again.
• If an existing, yet-unvisited element of the array is changed by callbackFn , its value passed to the callbackFn will be the value at the time that element gets visited. Deleted elements are visited as if they were undefined .

Warning: Concurrent modifications of the kind described above frequently lead to hard-to-understand code and are generally to be avoided (except in special cases).

The findIndex() method is generic. It only expects the this value to have a length property and integer-keyed properties.

Examples

Find the index of a prime number in an array

The following example returns the index of the first element in the array that is a prime number, or -1 if there is no prime number.

function isPrime(element)  if (element % 2 === 0 || element  2)  return false; > for (let factor = 3; factor  Math.sqrt(element); factor += 2)  if (element % factor === 0)  return false; > > return true; > console.log([4, 6, 8, 9, 12].findIndex(isPrime)); // -1, not found console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (array[2] is 7) 

Using findIndex() on sparse arrays

You can search for undefined in a sparse array and get the index of an empty slot.

.log([1, , 3].findIndex((x) => x === undefined)); // 1 

Calling findIndex() on non-array objects

The findIndex() method reads the length property of this and then accesses each property whose key is a nonnegative integer less than length .

const arrayLike =  length: 3, "-1": 0.1, // ignored by findIndex() since -1 < 00: 2, 1: 7.3, 2: 4, >; console.log( Array.prototype.findIndex.call(arrayLike, (x) => !Number.isInteger(x)), ); // 1 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 27, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Javascript what is «index» within an argument? [duplicate]

So I saw the above example that shows how to get the index of the clicked element. I noticed that it uses «index» as a parameter. Unfortunately I am only aware of indexof so how does this work? I cant find anything about «index» when googling: javascript index property or javascript index argument. Edit: I really didnt see the function call with (i) as it was so small.

index is what i is called when it’s passed into the IIFE (to avoid scoping issues with the event listener).

@Andy but there is no meaning to this variable so how does it work? It has no value. I mean I dont see var index = something;

This (function(index). )(i) defines local function and calls it immediately passing i as its index argument.

2 Answers 2

The other answer and comments are correct, index in this case is just a function argument, but I’ll (try) to explain a bit more what’s going on here.

As others have said, index is just a variable, in this case the argument to the function. There’s nothing special about the name index here, it could have been argument1 or vader :-), or whatever.

So what’s happening is that this function is being declared:

I’ve replaced index with arg1 to show that index isn’t special, although it works fine with index . After that function’s declared, it’s being called by wrapping it in parens, and then passing the argument i (the (i) ). This calls the function, assigning the current value of i to the first argument to the function, arg1 here, or index in the original. The function declares another function, this time

and assigns it to the onclick handler of the i’th element of the g.children array. So each onclick handler will be a function that just does an alert of the index of the array element.

If you step through the loop in a debugger, you’ll see it effectively does:

g.children[0].onclick = function()< alert(0); >; g.children[1].onclick = function()< alert(1); >; g.children[2].onclick = function()< alert(2); >; 

Источник