title: Looping through jQuery object and getting data value
body: <p>I have a jQuery object which I get via code such as this:</p>
  
  <pre><code>var elements = $('#all_cats_holder div.wSelect-option-selected').detach();
  </code></pre>
  
  <p>The code it gets will be something such as:</p>
  
  <pre><code>&lt;div class="wSelect-option wSelect-option-selected"&gt;&lt;div class="wSelect-option-value" data-val="2"&gt;Some stupid cat #2&lt;/div&gt;&lt;/div&gt;
  &lt;div class="wSelect-option wSelect-option-selected"&gt;&lt;div class="wSelect-option-value" data-val="3"&gt;Some stupid cat #3&lt;/div&gt;&lt;/div&gt;
  &lt;div class="wSelect-option wSelect-option-selected"&gt;&lt;div class="wSelect-option-value" data-val="4"&gt;Some stupid cat #4&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now I'm trying to loop through this data and get the value of <code>data-val</code> but I can't seem to get it to work.</p>
  
  <p>My code:</p>
  
  <pre><code>var mr_val;
  
  $.each(elements, function(index, el) {
  
      mr_val = el.data('val');
  
      alert(mr_val);            
  
  });
  </code></pre>
  
  <p>I don't even get an alert at all.</p>