jQuery将数据属性传递给回调函数

Question

Hey guys I have the following function where obj is a table row

calculate: function(obj) {     
  var sum = 0;   
  $('option:selected', obj).attr('value', function(i,v){
    sum += Number(v);
  });
  $('td:last', obj).text(sum);
  HoursSum.table.trigger('sumChanged', sum);
}

At this point it is correctly retrieving the value attribute. My question is: How can I access a data attribute of the same selected option? I have tried:

 ('option:selected', obj).data('duration', ....
.data('data-duration')
.attr('duration') 

However none of them seem to work. The jQuery documentation says that data() should do the trick but in this case for some reason it doesn't. Any ideas?

Example HTML

<td class='col-sm-1' style='background-color:pink'>
  <select id='22505.30' class='form-control-sm' style='font-size: 11px;' name='shifts' onchange="submitEntry(this.value,this.id, 22505, '30.06.2018')">
    <option value='0'>Select</option>
    <option data-duration='10.60' data-shiftstart='21:00' data-shiftend='06:00' value='120'>test</option>
    <option data-duration='1.00' data-shiftstart='12:00' data-shiftend='13:00' value='118'>test1</option>
  </select>
</td>

Answer 1

You can try the following code. but we need to see your HTML to help you with better code.

calculate: function(obj) {     
  var sum = 0;   
  $('option:selected', obj).each(function(){
    var data = $(this).data();
    sum += data.duration;
  });
  $('td:last', obj).text(sum);
  HoursSum.table.trigger('sumChanged', sum);
}