Not getting index value of the clicked a href tag

Question

I have following html

HTML code for testing purposes (do not submit uncommented):
<body>
  In my life, I used the following web search engines:<br/>
  <a href="#test" id="mmYahooId">Yahoo!</a><br/>
  <a href="#test" id="mmaltaVistaId">AltaVista</a><br/>
  <a href="#test" id="mmgooId">Google</a><br/>
</body>

My JS

$('a[id^=mm]').on('click', function () {
alert("test")
var as = document.body.getElementsByTagName("a");
alert("test")
for(var i=0; i < as.length;i++) {
  as[i].onClick = function(){
          alert(i);
  }
   }  
});

The alert is not giving me the index of the link clicked. How can i get the index?

I think another part of the answer that's not a duplicate is you need quotes around `mm`: `$('a[id^="mm"]')` — Tashi, Mar 30 '17 at 09:15

score 1 · Answer 1 · answered Mar 30 '17 at 09:17

use jquery with index() function

$('body').on('click','a[id^=mm]', function () {
console.log($(this).index()/2)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML code for testing purposes (do not submit uncommented):

<body>
  In my life, I used the following web search engines:<br/>
  <a href="#test" id="mmYahooId">Yahoo!</a><br/>
  <a href="#test" id="mmaltaVistaId">AltaVista</a><br/>
  <a href="#test" id="mmgooId">Google</a><br/>
</body>

score 1 · Answer 2 · answered Mar 30 '17 at 09:33

Try the following:

$('a[id^=mm]').on('click', function () {
    var nodeList = Array.prototype.slice.call(document.body.getElementsByTagName("a"));
    var index = nodeList.indexOf($(this)[0]);
    alert('You have clicked: '+index)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
In my life, I used the following web search engines:<br/>
<a href="#test" id="mmYahooId">Yahoo!</a><br/>
<a href="#test" id="mmaltaVistaId">AltaVista</a><br/>
<a href="#test" id="mmgooId">Google</a><br/>

Not getting index value of the clicked a href tag

2 Answers2