Using jQuery, I am trying to get the data attribute of the following...

<a href="#" data-id="54" class="active">54</a>

var myid = jQuery("active").data("id");

Buit this is giving me an undefined error, where am I going wrong?

Using jQuery, I am trying to get the data attribute of the following...

<a href="#" data-id="54" class="active">54</a>

var myid = jQuery("active").data("id");

Buit this is giving me an undefined error, where am I going wrong?

• javascript
• jquery

• 2 You forgot the period in front of the class name. It should be jQuery(".acitve") – Terry Commented Jul 23, 2019 at 11:18
• There are many ways to get the result of data-attribute. You may check the result in answers. In current code you have missed class declaration – Shivani Sonagara Commented Jul 23, 2019 at 11:31

8 Answers 8

Missing "." before class selector. You need to do something like this to get the id attribute:

$(".active").attr("id");

Refer: https://api.jquery./attr/

active will select <active> elements, if you want to get elements that have this class name use .active.

Here is an example:

jQuery(".active")

You forgot to use class selector (.) .Moreover Class selector is not suited when you are looking to have multiple elements with same class (it will always return the first element).

var myid = jQuery(".active").data("id");
console.log(myid)

// if you have multiple elements with same class

jQuery(".active").each(function() {

  let myid = $(this).data("id");
  console.log(myid)

})

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<a href="#" data-id="54" class="active">54</a>
<a href="#" data-id="55" class="active">55</a>

var myid = jQuery(".active").data("id");
console.log(myid)

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-id="54" class="active">54</a>

You were missing a "." in the selector - to tell jQuery you are selecting a class.

if you are accessing class then add '.'(dot). you code would be .

<a href="#" data-id="54" class="active">54</a>

var myid = jQuery(".active").data("id");

To find the attribute value of any tag you may use attr() method on the tag. Inside the attr() method you have to pass the custom data tag like data-{attribute-teag-name}

There are four different ways to get the result:

$(document).ready(function(){

  var id = $("#custom").attr("data-customid");
  console.log("attribute value with id -- ",id);
  var id_1 = $(".active").attr("data-customid");
  console.log("attribute value with class -- ",id_1);
  var id_2 = $(".active").data("customid");
  console.log("attribute value with class and data method -- ",id_2);
  var id_3 = $("#custom").data("customid");
  console.log("attribute value with id and data method -- ",id_3);
})

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-customid="54" id="custom" class="active">54</a>

There is "." missing before class selector, You can get the data-id attribute value by:

$(".active").attr("data-id"); or $(".active").data("id");

Getting data- attribute value by class so you have to use "." and by id "#" before the tag-name

Reference:

https://api.jquery./attr/

https://www.tutorialspoint./jquery/jquery-selectors

You call <active> elements by Jquery("active")

Try

var myid = Jquery(".active").data("id");