title: jQuery Knob - Return values of multiple knobs on-demand?
body: <p><strong>[jsFiddle][1]</strong></p>
  <p>I need to access the correct (displayed) [knob][2] values on demand with jQuery.
  I know about the <code>'change'</code> function, but I need to access the values of multiple knobs at once.</p>
  <p>I need to multiply each of these knob's values by specific amounts and then sum the result; Is there a way to get the <code>'change'</code> function to supply the knob's <code>id</code> or some other identifying attribute so my script can tell their values apart?</p>
  <p>This calculate function is what I have so far, I've made it trigger on every knob's <code>'change'</code> and when a button is clicked:</p>
  <pre><code>function calculate() {
      var result = 0;
      $('.dial').each(function (e) {
          result += $(this).val(); //Multiply by 1 to get an int
      });
      $('#result').text((typeof result) + ' ' + result); //Why is this a string in the first place?
  } 
  </code></pre>
  <p>With this to set up the knobs:</p>
  <pre><code>$('.dial').each(function (e) {
          $(this).knob({
              max: 99,
              width: 120,
              height: 120,
              bgColor: '#85d4b0',
              fgColor: '#0ca961',
              inputColor: '#0ca961',
              thickness: 0.15,
              change: function (v) {
                  console.log(v, this.v, this.cv);
                  calculate(); //I need it to (re-)calculate every time any knob's value changes
              }
          });
      }
  </code></pre>
  <p><code>.val()</code> doesn't work because it seems to be lagging behind; the first time it's run it doesn't update the result and the consecutive times it does, but it changes it to that of the previous value.</p>
  <p>Any ideas?</p>
  <p>Edit:
  If I could get the <code>id</code> of the knob whose value changed, I could do the following:</p>
  <pre><code>var knobs = [{
      id: '',
      val: 0
  }];
  $('.dial').each(function () {
      $(this).knob({change: function(v, id){
          knobsMod(v, id);
      }});
  });
  $('.dial').parent().each(function (e) {
          $(this).attr('id', 'knob'+e);
          if (e &gt; (knobs.length - 1)) {
              knobs[e] = $.extend({}, knobs[0]);
          }
          knobs[e].id = $(this).attr('id');
          knobs[e].val = $(this).val()*1;
  });
  function knobsMod(v, id){
      for (var i = 0; i &lt; knobs.length; i++){
          if (knobs[i].id === id){
              knobs[i].val = v;
              break;
          }
      }
  }
  </code></pre>
  <p>And then it could just read the <code>knobs</code> object whenever it recalculates.
  [1]: <a href="http://jsfiddle.net/SoullessWaffle/2mt2U/" rel="nofollow noreferrer">http://jsfiddle.net/SoullessWaffle/2mt2U/</a>
  [2]: <a href="http://anthonyterrien.com/knob/" rel="nofollow noreferrer">http://anthonyterrien.com/knob/</a></p>