Selecting ID of a element in Jquery

Question

I have following HTML code snippet.

<li my-id="10" class="my-class">test-1</li>
<li my-id="15" class="my-class">test-2</li>
<li my-id="20" class="my-class">test-3</li>

Can anybody help me how to get the id of the above one html element when a click event is occur. When explaining more, I have following code in jquery. When a user clicks on any of the above element I need to extract the id corresponds to same element. I use following code in jQuery.

$('.my-class').on('click', function(e) {
var ids = e.targetElement.attr('my-id'); 
});

But the above code snippet is not working. Can anybody suggest better method to do this ?

Rajaprabhu Aravindasamy · Accepted Answer · 2016-02-27 12:53:11Z

4

Try to invoke .attr() over $(this). since .attr() will not be available in the prototype of a node object,

$('.my-class').on('click', function(e) {
 var ids = $(this).attr('my-id'); 
});

answered Feb 27, 2016 at 12:53

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hakan Kose · Accepted Answer · 2016-02-27 12:59:18Z

1

You need to use e.currentTarget as a selector like this.

$('.my-class').on('click', function(e) {
 var ids = $(e.currentTarget).attr("my-id");  
 alert(ids)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li my-id="10" class="my-class">test-1</li>
<li my-id="15" class="my-class">test-2</li>
<li my-id="20" class="my-class">test-3</li>

answered Feb 27, 2016 at 12:59

Hakan Kose

1,6569 silver badges18 bronze badges

Comments

Maxi Schvindt · Accepted Answer · 2016-02-27 13:06:23Z

0

Try, use atributes 'id' in your list

<li id="10" class="my-class">test-1</li>
<li id="15" class="my-class">test-2</li>
<li id="20" class="my-class">test-3</li>

And in javascript, this.id

$('.my-class').on('click', function(e) {
 var ids = this.id; 
 alert(ids);
});

And include jquery. Eg: https://jsfiddle.net/Cuchu/7h1ecsm7/

answered Feb 27, 2016 at 13:06

Maxi Schvindt

1,4601 gold badge11 silver badges21 bronze badges

Comments

Zakaria Acharki · Accepted Answer · 2016-02-27 13:02:47Z

0

attr() is a jQuery method so you should call it on jQuery object $(this) :

var ids = $(this).attr('my-id');

if you want javascript alternative you could use getAttribute :

var ids = e.target.getAttribute('my-id');

Hope this helps.

$('.my-class').on('click', function(e) {
    alert(e.target.getAttribute('my-id')+' ---- '+ $(this).attr('my-id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li my-id="10" class="my-class">test-1</li>
<li my-id="15" class="my-class">test-2</li>
<li my-id="20" class="my-class">test-3</li>

answered Feb 27, 2016 at 13:02

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Comments

Sarantis Tofas · Accepted Answer · 2016-02-27 13:05:13Z

0

Just wrap this with jQuery then use the attr method to get the attribute you need:

$('.my-class').click(function() {
  var ids = $(this).attr('my-id'); 
});

answered Feb 27, 2016 at 13:05

Sarantis Tofas

5,1871 gold badge26 silver badges36 bronze badges

Collectives™ on Stack Overflow

Selecting ID of a element in Jquery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related