How to get the id of html list item using jquery?

Question

I wanna get the id of <li> using jquery. I was able to get the text using alert($(this).text()) but when I tried alert($(this).id()) it says undefined.

<html>
<head>
<style type="text/css">
 ul {
  list-style-type: none;
 }
</style>
<script type="text/javascript" src="jquery1.6.4min.js"></script>
 <script type="text/javascript" > 
  $(document).ready(function() {
   $('#list li').click(function() {
    alert($(this).id());
    alert($(this).text());
   });
  });
</script>
</head>
<body>
 <ul id="list">
  <li id="l1">Value 1</li>
  <li id="l2">Value 2</li>
  <li id="l3">Value 3</li>
  <li id="l4">Value 4</li>
  <li id="l5">Value 5</li>
  <li id="l6">Value 6</li>
  <li id="l7">Value 7</li>
  <li id="l8">Value 8</li>
  <li id="l9">Value 9</li>
  <li id="l10">Value 10</li>
  <li id="l11">Value 11</li>
  <li id="l12">Value 12</li>
 </ul>
</body>
</html>

Plase help me with this. Thanks in advance.

Clive · Accepted Answer · 2011-11-18 18:56:13Z

12

You should get attributes from elements using the attr() function:

alert($(this).attr('id'));

The jQuery object doesn't have a method called id() which is why you're getting the result as undefined.

answered Nov 18, 2011 at 18:56

Clive

36.9k8 gold badges89 silver badges113 bronze badges

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

Comments

Tesserex · Accepted Answer · 2011-11-18 18:56:03Z

3

it's actually $(this).attr('id'), not $(this).id().

answered Nov 18, 2011 at 18:56

Tesserex

17.3k6 gold badges72 silver badges108 bronze badges

Comments

Dallas · Accepted Answer · 2011-11-18 18:56:32Z

3

id is an attribute. You need

alert($(this).attr('id'))

answered Nov 18, 2011 at 18:56

Dallas

2,2371 gold badge13 silver badges13 bronze badges

Comments

Icarus · Accepted Answer · 2011-11-18 18:58:00Z

1

 $(document).ready(function() {
   $('#list li').click(function() {
    alert($(this).attr("id"));
    alert($(this).text());
   });
  });

Check jsfiddle here.

answered Nov 18, 2011 at 18:58

Icarus

64k14 gold badges102 silver badges116 bronze badges

Comments

Kalu Singh Rao · Accepted Answer · 2015-11-30 09:56:22Z

0

You can use jQuery 1.6 + then you should use this code.

var id = $(this).prop('id');

answered Nov 30, 2015 at 9:56

Kalu Singh Rao

1,6971 gold badge16 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to get the id of html list item using jquery?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

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

Linked

Related