How to get the value of data attribute using jquery

I am working on a node.js application which generates a html page. This html page displays a list of associates built according to the data passed onto this page. A list is built something like as follows:

<ul class="notification-body" style="">
    //loop for all assocaite id's passed to this page
    <li class="testClass" data-associateid="<%= assocID %>">
         <span>
             <span class="subject">
                  <label class="btnClass label label-info">ClickMe!</label>
             </span>
         </span>
    </li>

The generated html src looks something like this:

<ul class="notification-body" style="">
    <li class="testClass" data-associateid="AA01">
    <li class="testClass" data-associateid="AA02">
    <li class="testClass" data-associateid="AA03">

I am trying to get the value of the data attribute using Jquery & I tried the following:

   $(".btnClass").click(function(){
        console.log($".testClass").attr("data-associateid"));
   });

But this outputs'AA01'everytime i click on the btn and I am not getting the expected output in the console: AA01 AA02 AA03

I tried the following also but it gives me undefined:

   $(".btnClass").click(function(){
        console.log($(this).find(".testClass").attr("data-associateid"));
   });

What you are currently doing:

$(".btnClass").click(function(){
     console.log($(".testClass").attr("data-associateid"));
});

Will match the first instance of .testClass and print the data-associateid attribute. What you seem to want to do is to iterate over all .testClass and print their data-associateid values:

$(".btnClass").click(function(){
     $(".testClass").each(function() {
       console.log($(this).attr('data-associateid'));
     });
});

Based on your updated HTML you would do this:

$(".btnClass").click(function() {
    var id = $(this).parents('.testClass').attr('data-associateid');
    console.log(id);
});

This will search the parents of the clicked on .btnClass to find elements with the class .testClass.

To get the data for that instance you simply need to traverse to the parent <li>.

Within an event handler, this is the element that the event occured on. Use closest() to access the parent <li>

$(".btnClass").on('click', function(){
        alert( $(this).closest('li').data('associateid') );
});

Assign different classes to your li elements like this:

<ul class="notification-body" style="">
    <li class="testClass1" data-associateid="AA01">test 1</li>
    <li class="testClass2" data-associateid="AA02">test 2</li>
    <li class="testClass3" data-associateid="AA03">test 2</li>
</ul>

Note, that I closed your li and ul tags to have valid HTML.

And then you can select an element with its own class:

console.log($(".testClass2").attr("data-associateid"));

I created a JSFiddle for you:

http://jsfiddle.net/8rLpbk5m/

You need to use jQuery.data().

I've created a jsFiddle to show this working.

I've closed the LI because AR.

<ul class="notification-body" style="">
    <li class="testClass" data-associateid="AA01">1</li>
    <li class="testClass" data-associateid="AA02">2</li>
    <li class="testClass" data-associateid="AA03">3</li>
</ul>

Here's the JavaScript:

$(document).ready(function() {
    $('.testClass').on('click', function(){
        alert( $(this).data('associateid') );
    });
});

Anytime you have an attribute that starts with data-, you can reference the string after the dash as a data container. Here, I'm calling jQuery.data() on an object (the LI) and asking for the data in the container associateID.

I had hoped you could do it with just a find but apparently not. You have to use each to loop through all the elements.

$(".btnClass").click(function(){
   $(".testClass").each(function() {
    console.log($(this).attr('data-associateid'));
  });
});

View it here: http://jsfiddle.net/rt677qp5/

Using .data() is more logical in this case.

$(".btnClass").click(function() {
  $(".testClass").each(function() {

    alert($(this).data("associateid"));
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="notification-body" style="">
  <li class="testClass" data-associateid="AA01"></li>
  <li class="testClass" data-associateid="AA02"></li>
  <li class="testClass" data-associateid="AA03"></li>
</ul>
<button class="btnClass"></button>