title: JQuery: Getting "data-value=n" of a visible li in shuffle array
body: <p>I'm trying to create a card game (set up as a number of uls, with li elements shuffled at random), where you get 1 point per card (the visible li element) as they appear on a click function, with bonus points given to certain cards.</p>
  
  <p>The problem I'm having is in getting the values of those bonus point cards in order to tally them up. At the moment, the code only refers to the first li in the ul, which is not what I want. I've tried "li:visible" and that doesn't work. Any hints?</p>
  
  <p><strong>Demo here [Updated]:</strong> <a href="http://jsfiddle.net/cjcinc/f5mgtaf8/" rel="nofollow">jsFiddle</a></p>
  
  <p>(P.S. If the "data-value=n" method is too messy, I'll gladly jettison it, but I don't know what to use in its stead.)</p>
  
  <p><strong>HTML [Updated]:</strong></p>
  
  <pre><code>    &lt;a class="Tab" href="#dealBtn"&gt;&lt;div id="restartBtn"&gt;Restart&lt;/div&gt;&lt;/a&gt;
      &lt;a class="Start" href="#dealBtn"&gt;&lt;div id="dealBtn"&gt;Deal again&lt;/div&gt;&lt;/a&gt;
  
  &lt;!--href loops--&gt;
  &lt;div class="Cad_card"&gt;&lt;a class="Cad_title"&gt;Pack of Cards 1&lt;/a&gt;
  
      &lt;ul&gt;
          &lt;li class="Cad_menu" data-value="0"&gt;Card 1: +1 point&lt;/li&gt;
          &lt;li class="Cad_menu" data-value="2"&gt;Card 2: **+2 bonus points**&lt;/li&gt;
          &lt;li class="Cad_menu" data-value="0"&gt;Card 3: +1 point&lt;/li&gt;
          &lt;li class="Cad_menu" data-value="0"&gt;Card 4: +1 point&lt;/li&gt;
          &lt;li class="Cad_menu" data-value="0"&gt;Card 5: +1 point&lt;/li&gt;
          &lt;li class="Cad_menu" data-value="0"&gt;Card 6: +1 point&lt;/li&gt;
          &lt;li class="Cad_menu" data-value="0"&gt;Card 7: +1 point&lt;/li&gt;
          &lt;li class="Cad_menu" data-value="0"&gt;Card 8: +1 point&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!--end div.Cad_card--&gt;
  &lt;div class="Ce_card"&gt;&lt;a class="Ce_title"&gt;Pack of Cards 2&lt;/a&gt;
  
      &lt;ul&gt;
          &lt;li class="Ce_menu" data-value="0"&gt;Card 1: +1 point&lt;/li&gt;
          &lt;li class="Ce_menu" data-value="0"&gt;Card 2: +1 point&lt;/li&gt;
          &lt;li class="Ce_menu" data-value="0"&gt;Card 3: +1 point&lt;/li&gt;
          &lt;li class="Ce_menu" data-value="0"&gt;Card 4: +1 point&lt;/li&gt;
          &lt;li class="Ce_menu" data-value="0"&gt;Card 5: +1 point&lt;/li&gt;
          &lt;li class="Ce_menu" data-value="3"&gt;Card 6: **+3 bonus points**&lt;/li&gt;
          &lt;li class="Ce_menu" data-value="0"&gt;Card 7: +1 point&lt;/li&gt;
          &lt;li class="Ce_menu" data-value="0"&gt;Card 8: +1 point&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;hr/&gt;
  &lt;div&gt;Cards dealt:
      &lt;div id="inlineOutput1"&gt;0&lt;/div&gt;Bonus points:
      &lt;div id="inlineOutput2"&gt;0&lt;/div&gt;Total points:
      &lt;div id="inlineOutput3"&gt;0&lt;/div&gt;Rounds:
      &lt;div id="inlineOutput4"&gt;0&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQuery [Updated]:</strong></p>
  
  <pre><code>var cardsDealt = $('div[class$=_card]').length;
  var firstBonus = parseInt($('.Cad_menu').attr('data-value'), 10);
  var secondBonus = parseInt($('.Ce_menu').attr('data-value'), 10);
  var totalBonus = firstBonus + secondBonus;
  var totalScore = cardsDealt + totalBonus;
  
  $('#dealBtn').click(function () {
      //get number of cards dealt
      $('#inlineOutput1').html(function (i, val) {
          return val * 1 + cardsDealt;
      });
  
      //bonus points
      $('#inlineOutput2').html(function (i, val) {
          return val * 1 + totalBonus;
      });
  
      //total score
      $('#inlineOutput3').html(function (i, val) {
          return val * 1 + totalScore;
      });
  });
  
  $('#restartBtn').click(function () {
      $('#inlineOutput1, #inlineOutput2, #inlineOutput3').html(function (i, val) {
          return val * 0;
      });
      $('#inlineOutput4').html(function (i, val) {
          return val * 1 + 1;
      });
  });
  
  //CARD SHUFFLE FUNCTION
  
  //show the title of each card, e.g. "Cad", "Ce", etc., on page load 
  $('[class$=_title]').show();
  
  //hide the list of words associated with each card on page load.
  $('[class$=_card] ul').hide();
  
  //reverses the two fields above and shuffles the cards
  jQuery(function ($) {
      $('#startBtn, #dealBtn').click(function (event) {
          event.preventDefault();
          $('[class$=_title]').hide();
          //hide the title of each card, e.g. "Cad", "Ce", etc.
          $('[class$=_card] ul').show();
          //show the list of words associated with each card, after title is hidden
          $('[class$=_card] ul').shuffle();
          //shuffle the list of words associated with each card
      });
  }); //end of Jquery command
  
  //algorithm for controlling the shuffle function
  (function ($) {
  
      $.fn.shuffle = function () {
          return this.each(function () {
              var items = $(this).children().clone(true);
              return (items.length) ? $(this).html($.shuffle(items)) : this;
          });
      };
  
      $.shuffle = function (arr) {
          for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
          return arr;
      };
  
  })(jQuery); //end of algorithm for controlling the shuffle function
  </code></pre>