selector in jquery - get rel attribute

Question

I have html code like this:

<li id="vol" rel="1">
    // something here
</li>
<li id="vol" rel="2">
    // something here
</li>
<li id="vol" rel="3">
    // something here
</li>

I'm try to get rel attribute by this code:

$('#vol').click(function(){
  var rel = $(this).attr('rel');
});

But it's not working. I also change this to #vol, but it didn't work. What should i do?

Answer 1

By Not working, I'm assuming that any li you click, gives you back 1, this is caused by having multiple ID in a page. IDs are supposed to be unique, use class instead.

try

<li class="vol" rel="1">
    // something here
</li>
<li class="vol" rel="2">
    // something here
</li>
<li class="vol" rel="3">
    // something here
</li>

JS:

$('.vol').click(function(){
  var rel = $(this).prop('rel');
});