An alert should display anchor's zero-based index within a document instead of following the link. HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
In my life, I used the following web search engines:<br/>
<a href="//www.yahoo">Yahoo!</a><br/>
<a href="//www.altavista">AltaVista</a><br/>
<a href="//www.google">Google</a><br/>
<script type="text/javascript" src="js/js8.js"></script>
</body>
</html>
JavaScript:
function registerHandlers() {
var as = document.getElementsByTagName('a');
for (i = as.length; i-- >= 0;) {
as[i].onclick = function() {
alert(i);
return false;
}
}
}
I tried to use jQuery:
$('a').click(function(event) {
var as = document.getElementsByTagName('a');
alert($(this).index());
});
but I got the index like 1,3,5 not 0,1,2
An alert should display anchor's zero-based index within a document instead of following the link. HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
In my life, I used the following web search engines:<br/>
<a href="//www.yahoo.">Yahoo!</a><br/>
<a href="//www.altavista.">AltaVista</a><br/>
<a href="//www.google.">Google</a><br/>
<script type="text/javascript" src="js/js8.js"></script>
</body>
</html>
JavaScript:
function registerHandlers() {
var as = document.getElementsByTagName('a');
for (i = as.length; i-- >= 0;) {
as[i].onclick = function() {
alert(i);
return false;
}
}
}
I tried to use jQuery:
$('a').click(function(event) {
var as = document.getElementsByTagName('a');
alert($(this).index());
});
but I got the index like 1,3,5 not 0,1,2
Share Improve this question edited Mar 4, 2019 at 0:36 Carlos Cavero 3,1965 gold badges22 silver badges44 bronze badges asked Jul 26, 2015 at 1:16 TODD_SydTODD_Syd 712 silver badges10 bronze badges 2- 1 I like that Bing isn't even a posible choice! – baao Commented Jul 26, 2015 at 1:34
- It's a question from a recruitment test. – Jazz Commented Jul 13, 2016 at 12:10
8 Answers
Reset to default 3Try this (http://jsfiddle/bcjv6suf/):
alert($('a').index(this));
P.S. https://api.jquery./index/#index-selector
Update: same without jquery (you need use closure for pass argument)
function registerHandlers() {
var as = document.getElementsByTagName('a');
for (i = as.length; i-- > 0;) {
as[i].onclick = (function(index) {
return function() {
console.log(index);
return false;
}}(i));
}
}
http://jsfiddle/u9f64y0c/
Here is my solution by adding a data-index attribute to the <a>.
function registerHandlers() {
var as = document.getElementsByTagName('a');
for (var i = 0; i < as.length; i++) {
as[i].setAttribute('data-index', i);
as[i].onclick = function () {
alert(this.getAttribute('data-index'));
}
}
}
Depends what collection you are trying to find the index of for that element.
Using jQuery
Index of instance of <a> within all <a> in page:
var $links = $('a').click(function(event) {
alert($links.index(this));
});
Index within siblings group
<div id="div">
<a/>
<a/>
<a/>
</div>
$('#div a').click(function(event) {
alert($(this)index());
});
Index of element within all elements in page
$('a').click(function(event) {
alert($('*')index(this));
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test page</title>
</head>
<body>
In my life, I used the following web search engines:<br />
<a href="//www.yahoo.">Yahoo!</a><br />
<a href="//www.altavista.">AltaVista</a><br />
<a href="//www.google.">Google</a><br />
<script type="text/javascript">
function registerHandlers() {
var as = document.getElementsByTagName("a");
for (var i = 0; i < as.length; i++) {
as[i].onclick = (function() {
var n = i;
return function() {
alert(n);
return false;
};
})();
}
}
registerHandlers();
</script>
</body>
</html>function registerHandlers() {
var as = document.getElementsByTagName('a');
for (var i = 0; i < as.length; i++) {
as[i].addEventListener('click', (function(i) {
return function(e) {
e.preventDefault();
alert(i);
}
})(i));
}
}
registerHandlers();
jQuery or exotic properties like setAttribute are not necessary. This question is about closures. Also don't forget to prevent the default behaviour, which was part of this practice question at present.
function registerHandlers() {
var as = document.getElementsByTagName('a');
for (var i = 0; i < as.length; i++) {
const index = i; // the following anon function closes over this variable
as[i].onclick = function(event) {
event.preventDefault(); // prevent default behaviour
alert(index);
return false;
}
}
}
The simplest way to debug this is to change the var i to let i = 0. let creates its own block scope within the onclick function. So, when the value of i is returned from within the onclick function scope, the value of i is preserved and gives zero-based index value. Without this, for loop has already run and the value of i it returns is the last value, which is 3, even if you click on any link.
function registerHandlers() {
var as = document.getElementsByTagName('a');
for (let i =0; i< as.length; i++) {
as[i].onclick = function() {
alert(i);
return false;
}
}
}
function registerHandlers() {
var as = document.getElementsByTagName("a");
for (var i = 0; i < as.length; i++) {
as[i].onclick = (function() {
var n = i;
return function() {
alert(n);
return false;
};
})();
}
}
registerHandlers();In my life, I used the following web search engines:<br />
<a href="//www.yahoo.">Yahoo!</a><br />
<a href="//www.altavista.">AltaVista</a><br />
<a href="//www.google.">Google</a><br />