[RESOLVED]What is the best way of getting the id of an "li" with jquery?

When calling a function with a control, I am trying to use:

var ID = $(this).attr(‘id’);

I keep getting undefined.

What am I doing wrong?

Your code is working fine in the sample demo I tried. Please
post your markup to understand
the issue better

Sample Code

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
 
  <script type="text/javascript" > 
  $(document).ready(function() {
   $('#list li').click(function() {
     //Get the id of list items
       var ID = $(this).attr('id');
     alert(ID);
   });
  });
</script>
</head>
<body>
  Click on each item to see the id
<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>

There could be a variety of things going wrong here, but without seeing some additional markup and code, it could be difficult to discern exactly what is going wrong.

Basically, you’ll need to ensure that all of your jQuery code is placed within a jQuery "document-ready" block to ensure that jQuery has been loaded : 

<script type='text/javascript'>
    // Example document-ready block
    $(function(){
          // Your event
          $('*').click(function(){
               // Get the ID for the element that was clicked
               var id = $(this).attr('id');

               // Announce it to the world!
               alert(id);
          });
    });
</script>

Additionally, you can’t forget to ensure that you are actually referencing the jQuery library, which will need to be referenced prior to the previous code listed above : 

<!-- Example jQuery Reference -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type='text/javascript'>
    // Example document-ready block
    $(function(){
          // Your event
          $('[id]').click(function(){
               // Get the ID for the element that was clicked
               var id = $(this).attr('id');

               // Announce it to the world!
               alert(id);
          });
    });
</script>

You can see a complete working example here.

Thanks for the replies. I am using JQuery all over the place, so I think it is loading ok.

Here is the HTML with the control calling the function:

<li id=img1" onClick="return liClick();">image 1</li>
here is the script:

function liClick() { alert($(this).attr('id'));

I am sure it is something obvious, but I can’t figure it out.

Thanks again!

You need to pass the li object as a parameter to your javascript function and then access the id using your code

Please change your code like given below

<li id="img1" onClick="return liClick(this);">image 1</li>

Javascript function:

 
    function liClick(obj) {
            alert($(obj).attr('id'));
    }

Sample Code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>  
    function liClick(obj) {
            alert($(obj).attr('id'));
    }
  </script>  
</head>
<body>
<li id="img1" onClick="return liClick(this);">image 1</li>
</body>
</html>

Sorry, I was creating the controls programmably and didn’t have an id added so there was no $(this).

Thanks for the help.

Leave a Reply