Get total of all data attribute values

Question

I am dynamically loading some of the content within my page and would like to get a total of all the data-attributes.

First the elements are cloned and appended

$('.chip').on('click', function () {
  $(this).clone().appendTo('.chipPlacement');
});

Then I have written a function that should get the totals

function chipsBet() {
  var redchip = $('.chipPlacement .chipValue.r').data() || 0;
  var bluechip = $('.chipPlacement .chipValue.b').data() || 0;
  var orangechip = $('.chipPlacement .chipValue.o').data() || 0;

  var total = redchip.chipValue + bluechip.chipValue + orangechip.chipValue;
  return total;

}

Before I append the elements the HTML looks like

<div class="chipPlacement"></div>

and once appended the HTML structure is

 <div class="chipPlacement">
     <div class="chip red">
       <div class="chipValue r" data-chip-value="1">1</div>
     </div>
 </div>

I need to listen for the DOM structure the change and then fire the chipsBet() function, but I'm not sure how to get this to work. I can't use .on('change') as that only applies to input, textarea and select.

I have tried firing the chipsBet function within the .chip.on('click') but I get NaN returned.

How can I get the data-attribute-values for the new elements in the DOM?

possible duplicate of [Is there a jQuery DOM change listener?](http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener) — Peter van der Wal, Aug 11 '14 at 13:39
Are you converting the values to ints with parseInt()? When originally returned, they're strings. — vch, Aug 11 '14 at 13:42
Well, lets say the data attribute isn't defined, and you end up with `0`, so what is `0.chipValue` supposed to get ? — adeneo, Aug 11 '14 at 13:42
@vch - when using jQuery's data, the data returned would be whatever format fits, for numbers it would be of type number, not string. — adeneo, Aug 11 '14 at 13:48
@Jack - ***NO*** -> **http://jsfiddle.net/adeneo/wo0k1xno/** — adeneo, Aug 11 '14 at 13:49
I thought that data() would take all data-attributes and put them into an object? http://api.jquery.com/data/ — Richlewis, Aug 11 '14 at 13:52

score 2 · Accepted Answer · answered Aug 11 '14 at 14:00

2

If you don't have a blue or orange chip, you're effectively trying to get .chipValue from 0 which is undefined and adding it to another number gives you NaN.

You can simply iterate over all .chipValue elements within the placement element like so:

function chipsBet() 
{
  var total = 0;

  $('.chipPlacement .chipValue').each(function() {
    total += $(this).data('chipValue');
  });

  return total;
}

answered Aug 11 '14 at 14:00

Ja͢ck

170,779
38
263
309

thank you, great refactoring there, though everyones contribution has helped me, so thank you to all – Richlewis Aug 11 '14 at 14:03
how come chipValue isnt chip-value, or does it not matter? – Richlewis Aug 11 '14 at 14:07
Ah, so much better than mine! I often overlook just how simplistic you can make jQuery ^-^ – BobbyDazzler Aug 11 '14 at 14:07
@Richlewis Both should work (perhaps `chip-value` is more portable, not sure), but you can choose whichever you're more comfortable with. – Ja͢ck Aug 11 '14 at 14:07

BobbyDazzler · Answer 2 · 2014-08-11T13:49:04.063

Nevermind, you altered your initial question.. carrying on.

<div class='chipPlacement'>
    <div class='chip red'>
        <div class='chipValue' data-chip-value='1'></div>
    </div>
</div>

Then to read your data attributes, you could do something like this.

$('.chip').on('click', function () {
    $(this).clone().appendTo('.chipPlacement');
    chipsBet();
});

function chipsBet() {
    var redchipVal = parseInt($('.chipValue .r').data('chip-value')) || 0;
    var bluechipVal = parseInt($('.chipValue .b').data('chip-value')) || 0;
    var orangechipVal = parseInt($('.chipValue .o').data('chip-value')) || 0;

    var total = redchipVal + bluechipVal + orangechipVal;
    return total;
}

thank you for your help, i thought .data() would convert for you, my misinterpretation it seems. — Richlewis, Aug 11 '14 at 13:59

score 0 · Answer 3 · answered Aug 11 '14 at 13:43

I think you want something like bellow. It will call the function every time any change will in div .chipPlacement.

$('.chipPlacement').bind("DOMSubtreeModified",function(){
    console.log('Div modified');
});

You can say for your problem

$('.chipPlacement').bind("DOMSubtreeModified",function(){
     chipsBet();
});

DEMO

Get total of all data attribute values

3 Answers3