title: .data() gets the first list item's data attribute only?
body: <p>Why is this code repeatedly getting the first data attribute only?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="als-wrapper"&gt;
      &lt;li class="als-item"&gt;&lt;a data-loc-subject="test value"&gt;&lt;img src="http://www.ikea.com//us/en/images/products/pugg-wall-clock__13080_PE040801_S4.jpg" height="100" width="100"/&gt;&lt;/a&gt;test value&lt;/li&gt;
      &lt;li class="als-item"&gt;&lt;a data-loc-subject="a second value"&gt;&lt;img src="http://www.ikea.com//us/en/images/products/pugg-wall-clock__13080_PE040801_S4.jpg" height="100" width="100"/&gt;&lt;/a&gt;a second value&lt;/li&gt;
      &lt;li class="als-item"&gt;&lt;a data-loc-subject="a third value"&gt;&lt;img src="http://www.ikea.com//us/en/images/products/pugg-wall-clock__13080_PE040801_S4.jpg" height="100" width="100"/&gt;&lt;/a&gt;a third value&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$( ".als-item" ).click(function(e) {
      e.preventDefault();
  
      var data = $('.als-item a').data('loc-subject');
      alert(data);
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/WebEnvelopment/H6XsV/" rel="nofollow">My jsfiddle example.</a></p>