Question

I have a set links on a page like this

<a href='' class='contact' data-index='1'>One</a>
<a href='' class='contact' data-index='2'>One</a>
<a href='' class='contact' data-index='3'>One</a>

I am trying to return the value of the data-index of each link when it is clicked but Whenever I click on each link, the data-index of the first link is always returned because jQuery will select all the links with class = ‘contact’ on the page.
I am trying to figure out how to select the data-index of the clicked link.

I use something like this :

var m_data = $("a#contact").attr("data-index");

I’ve also tried something like this :

$("a#contact").click(function() {
  var data = $(this).data('index');
});

but data was undefined.

Please how do I do this? Thanks.

Answer 1

# is an id selector. Which should be unique. When using id-selector in jQuery, it will always return the first element, since it isn’t expecting to find any more items.

Change your code

<a data-index="1" class="contact">Whatever</a>

$("a.contact").click(function() {
    var data = $(this).data("index");
});

And as Eskat0n mentions, since jQuery 1.6, jQuery automatically gets data- attributes via the data() method