How to use data attribute with jQuery?

Question

My jQuery selects the value attribute. How do I change my jQuery to select the data attribute "data-price"?

HTML:

<span id="priceToSwap3"">$238</span>

<select id="trapsize">
 <option data-price="238">item1</option>
 <option data-price="288">item2</option>
</select>

<select id="trapfabric">
 <option data-price="0">item3</option>
 <option data-price="20">item4</option>
</select>

jQuery:

$('#trapfabric, #trapsize').on('change', function() {
  var $selected = $('#trapfabric, #trapsize').children(":selected");

  sum = parseInt($('#trapsize').val()) + parseInt($('#trapfabric').val());
  $('#priceToSwap3').html('$' + sum
    );
});

possible duplicate of [How to select the HTML5 data attribute in jQuery?](http://stackoverflow.com/questions/15156250/how-to-select-the-html5-data-attribute-in-jquery) — Roko C. Buljan, Mar 01 '13 at 12:13
@roXon yes it's a duplicate because I didn't phrase my question properly in the last post and hence it was confusing. — Elijah Yang, Mar 01 '13 at 12:16

score 4 · Accepted Answer · answered Mar 01 '13 at 12:10

4

To fetch the data attribute $(el).data('price')

var sum = $('#trapsize option:selected').data('price') + $('#trapfabric option:selected').data('price');

Demo: Fiddle

answered Mar 01 '13 at 12:10

Arun P Johny

384,651
66
527
531

hi Arun, i have tried your suggestion also with parseInt but in my case it doesn't work: http://jsfiddle.net/wesweatyoushop/3H3dA/31/ – alex Oct 27 '14 at 17:20

bipen · Answer 2 · 2013-03-01T12:16:17.897

1

try this

 $('#trapsize option:selected').data('price');

using your code

$('#trapfabric, #trapsize').on('change', function() {
  sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));
  $('#priceToSwap3').html('$' + sum); 
});

example fiddle here

edited Mar 01 '13 at 12:16

answered Mar 01 '13 at 12:10

bipen

36,319
9
49
62

score 0 · Answer 3 · answered Mar 01 '13 at 12:10

0

$('option').attr('data-price');

answered Mar 01 '13 at 12:10

Merec

2,751
1
14
21

wassup · Answer 4 · 2013-03-01T12:17:43.310

0

attr("data-price");

or

data("price");

The latter being the preferable way.

In your code it would be:

sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));

More about data() here.

edited Mar 01 '13 at 12:17

answered Mar 01 '13 at 12:11

wassup

2,333
2
21
30

Anujith · Answer 5 · 2013-03-01T12:16:45.067

0

Try:

 $('#trapsize option:selected').data('price');  

 $('#trapfabric option:selected').data('price');

And your function should be;

$('#trapfabric, #trapsize').on('change', function() {
   sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));
   $('#priceToSwap3').html('$' + sum);
})

edited Mar 01 '13 at 12:16

answered Mar 01 '13 at 12:11

Anujith

9,370
6
33
48

score 0 · Answer 6 · answered Mar 01 '13 at 12:11

0

You can use jquery attr

$("your dom").attr("data-price")

answered Mar 01 '13 at 12:11

abhijit

1,958
3
28
39

score 0 · Answer 7 · answered Oct 14 '18 at 05:49

0

even you can get and set values based on the attribute

$("[data-price=238]").attr("data-price", 0);

answered Oct 14 '18 at 05:49

Krishnamoorthy Acharya

3,846
36
29

How to use data attribute with jQuery?

7 Answers7