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

【问题标题】：how to get data from each li using jquery each function?如何使用 jquery 每个函数从每个 li 获取数据？
【发布时间】：2016-12-24 22:18:01
【问题描述】：

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

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

【问题讨论】：

您在哪里访问代码中的data-id 属性？
哎呀，因为这不起作用，我正在使用每个函数的索引，等等让我编辑，问题
您的 HTML 有问题。从第 5 里删除多余的引号。

标签： javascript jquery html css slider

【解决方案1】：

试试这个：

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

【讨论】：

谢谢，但请检查接受的答案，我认为这是使用数据的正确方法，因为有数据功能。
小心接受简单化的答案@River CR Phoenix 通常有一个微妙的原因为什么一个选项比另一个更好。

【解决方案2】：

可以使用getAttribute方法获取elements属性

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>

【讨论】：

是的，这行得通，但是有没有办法从每个 li 中获取数据值？？

【解决方案3】：

只需替换

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

与

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

【讨论】：

太棒了，这么简单的事情很难注意到，谢谢尼古拉，
注意这一点 - 我相信使用 .data() 方法 - 值被缓存并可能导致功能改变 - 我建议 .attr('data-id');正如@Mayank Pandey 所建议的那样
@gavgrif - 是什么让你认为它被缓存了？
我过去经常使用 .data('x') 但正在阅读 SO 中有关数据属性的不同方面的信息，而且比我更聪明的人指出了它 - 所以现在我使用 .attr('数据-x');作为获取/查看数据属性值的首选方法。
好吧，如果他之后不开始更改属性值，那么 OP 似乎就足够安全了，我很确定，因为它是 id-something。否则他可能会切换到var pos = $(this).attr('data-id') * 150;。