Getting the values of HTML Data attributes with Jquery

Question

I have a click function that passes the following dom as this:

<span class="tcloud label label-large label-primary" data-c="1" data-n="environment">
                        environment
                      </span>

How can I use jquery to select for the values of the html5 data attributes?

$(document).ready(function() { 
  $('span.tcloud').click(

  function () {
  console.log(this) // returns the above dom
  console.log($(this)) // returns an error
  console.log(this.data("data-c")) // returns Uncaught TypeError: Object #<HTMLSpanElement> has no method 'data'

user1721135 · Accepted Answer · 2013-07-12 06:56:36Z

1

Personally, I simply use

var values = $("element").attr("data-c");

answered Jul 12, 2013 at 6:56

user1721135

7,1128 gold badges39 silver badges67 bronze badges

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

1 Comment

JZ. Over a year ago

Uncaught TypeError: Object #<HTMLSpanElement> has no method 'attr' console.log(this.attr("data-c"))

Muneeb Nasir · Accepted Answer · 2013-07-12 06:57:08Z

0

you can get the value by using its id in following way.

 $('span.tcloud').click(

  function () {
      console.log( $('#element').val());
 }

answered Jul 12, 2013 at 6:57

Muneeb Nasir

2,5144 gold badges33 silver badges55 bronze badges

Collectives™ on Stack Overflow

Getting the values of HTML Data attributes with Jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related