How to get the value of data attribute using jquery

Question

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"));
   });

Solution 1

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.

Solution 2

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.

Solution 3

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') );
});

Solution 4

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>

Solution 5

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/

View more solutions

Comments

[kidA]

Where is the element with class .btnClass in your html code?

[coopersita]

I think you need to look into this: api.jquery.com/each

[Rookie]

sorry guys i have updated the code in the original post

[niba]

From jquery: The .attr() method gets the attribute value for only the first element in the matched set. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.

[Jonathan Crowe]

Updated my answer to match what you are asking

[lehnerchristian]

Ok, I didn't see that you want to log all IDs. So it's Jonathan Crowe's answer.

[Rookie]

Hi guys, thanks a lot for your responses. I have updated the html structure i am using in the original post. So basically, when i click on the label 'clickMe' I want to console.log() the value of the corresponsing assocaiteId for that <li>

[charlietfl]

assigning unique classes isn't necessary or very scalable. Numerous other ways to access an element

[Suhail Mumtaz Awan]

Provided detailed solution, downvoter should care to explaing the action of downV's ....+1 for help