title: how to get data from each li using jquery each function?
body: <p>I have a unordered list and each list element have "data-id" attribute, the idea is that using JQuery's each function iterate through each list element and get the "data-id" value and dynamically assign the position, ie to make a item slider that slides one item at a time.
  but on each the value of data I'm getting is <strong>"1"</strong>, ie its taking value from the first element only,
  how do I fix it??</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="explore_matches"&gt;
     &lt;p&gt;Recent Matches&lt;/p&gt;
     &lt;ul class="clearfix item-slider"&gt;
         &lt;li data-id="1" &gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
         &lt;li data-id="2" &gt;&lt;span&gt;2&lt;/span&gt;&lt;/li&gt;
         &lt;li data-id="3" &gt;&lt;span&gt;3&lt;/span&gt;&lt;/li&gt;
         &lt;li data-id="4" &gt;&lt;span&gt;4&lt;/span&gt;&lt;/li&gt;
         &lt;li data-id="5" "&gt;&lt;span&gt;5&lt;/span&gt;&lt;/li&gt;
         &lt;li data-id="6" "&gt;&lt;span&gt;6&lt;/span&gt;&lt;/li&gt;
         &lt;li data-id="7" "&gt;&lt;span&gt;7&lt;/span&gt;&lt;/li&gt;
         &lt;li data-id="8" "&gt;&lt;span&gt;8&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;button name="pre"&gt;Pre&lt;/button&gt;
      &lt;button name="next"&gt;Next&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var item_width = $('.item-slider').width();
  var item_margin = (item_width-600)/5;
  var items = $('ul.item-slider&gt;li');
  
  $.each(items,function(index){
  
      var pos = $('.item-slider &gt; li').data('id') * 150;
      if(index === 0)     
          $(this).css("left", pos);
      else
          $(this).css("left", pos + index * item_margin);
      console.log(pos);
  })
  </code></pre>