Question

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

HTML

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);
})

的JavaScript

int[][] x = 
    {
        { 1, 2, 3, 4, 5, 6, 7 },
        { 1, 2, 3, 4, 5, 6, 7 },
        { 1, 2, 3, 4, 5, 6, 7 },
        { 1, 2, 3, 4, 5, 6, 7 }
    };

index = 3

int[][] y = 
        {
            { 5, 6, 7, 1, 2, 3, 4 },
            { 5, 6, 7, 1, 2, 3, 4 },
            { 5, 6, 7, 1, 2, 3, 4 },
            { 5, 6, 7, 1, 2, 3, 4 }
        };

Answer 1

试试这个：

$('li').each(function() {
    var data = $(this).attr('data-id');   // it will give 1,2,3 and so on
    //do stuff to each
});

Answer 2

您可以使用getAttribute方法

获取元素属性

var item_width = $('.item-slider').width();
var item_margin = (item_width-600)/5;
var items = $('ul.item-slider>li');

$.each(items,function(index, node){
    var pos = index * 150;
    alert(node.getAttribute('data-id'));
    if(index === 0)     
        $(this).css("left", pos);
    else
        $(this).css("left", pos + index * item_margin);
    console.log(pos);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

只需替换

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

与

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

如何使用jquery每个函数从每个li获取数据？

3 个答案: