如何从每个利用jQuery的每个函数获取数据？ [英] how to get data from each li using jquery each function?

问题描述

我有一个无序列表，每个列表元素都有data-id属性，这个想法是使用JQuery的每个函数迭代每个列表元素并获取data-id值并动态分配位置，即制作一次滑动一个项目的项目滑块。
，但是每个我得到的数据的值都是1，即它仅从第一个元素获取值，
如何修复它？ p>

HTML

 < div class = explore_matches > 
< p>近期比赛< / p> 
< ul class =clearfix item-slider> 
< li data-id =1>< span> 1< / span>< / li> 
< li data-id =2>< span> 2< / span>< / li> 
< li data-id =3>< span> 3< / span>< / li> 
< li data-id =4>< span> 4< / span>< / li> 
 
< li data-id =6跨度→6< /跨度>< /锂> 
< li data-id =7>< span> 7< / span>< / li> 
< li data-id =8跨度> 8 LT; /跨度>< /锂> 
< / ul> 
< button name =pre> Pre< / button> 
< button name =next> Next< / button> 
< / div> 
  

JavaScript

  var item_width = $（'。item-slider'）。width（）; 
 var item_margin =（item_width-600）/ 5; 
 var items = $（'ul.item-slider> li'）; 
 
 $ .each（items，function（index）{
 
 var pos = $（'。item-slider> li'）。data（'id'）* 150; 
 if（index === 0）
 $（this）.css（left，pos）; 
 else 
 $（this）.css（left ，pos + index * item_margin）; 
 console.log（pos）; 
}）
  

  var pos = $（'。item-滑块> li'）。data（'id'）* 150; 
  

with

  var pos = $（this）.data（'id'）* 150; 
  

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 "1", ie its taking value from the first element only, how do I fix it??

HTML

<div class="explore_matches">
   <p>Recent Matches</p>
   <ul class="clearfix item-slider">
       <li data-id="1" ><span>1</span></li>
       <li data-id="2" ><span>2</span></li>
       <li data-id="3" ><span>3</span></li>
       <li data-id="4" ><span>4</span></li>
       <li data-id="5" "><span>5</span></li>
       <li data-id="6" "><span>6</span></li>
       <li data-id="7" "><span>7</span></li>
       <li data-id="8" "><span>8</span></li>
    </ul>
    <button name="pre">Pre</button>
    <button name="next">Next</button>
</div>

JavaScript

var item_width = $('.item-slider').width();
var item_margin = (item_width-600)/5;
var items = $('ul.item-slider>li');

$.each(items,function(index){

    var pos = $('.item-slider > li').data('id') * 150;
    if(index === 0)     
        $(this).css("left", pos);
    else
        $(this).css("left", pos + index * item_margin);
    console.log(pos);
})

解决方案

Just replace

var pos = $('.item-slider > li').data('id') * 150; 

with

var pos = $(this).data('id') * 150;

这篇关于如何从每个利用jQuery的每个函数获取数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！