jQuery多相同ID元素的data-value属性取值问题求助

首先得指出一个关键问题：HTML规范里ID必须是唯一的，你现在多个<span>用了同一个id="nota_imdb"，这是不符合标准的，浏览器在解析的时候只会匹配到第一个带这个ID的元素，所以你的代码只能拿到第一个data-value="18"的值，这就是问题根源。

下面是具体的解决步骤：

1. 修改HTML结构，替换重复ID为Class #

把所有重复的id="nota_imdb"改成class="nota_imdb"，Class是允许重复使用的：

<span class="imdb nota_imdb" data-value="18"></span>
<span class="imdb nota_imdb" data-value="19"></span>
<span class="imdb nota_imdb" data-value="20"></span>
<!-- 假设你要把结果写入这个元素 -->
<div id="imdb"></div>

2. 用jQuery遍历所有元素获取data-value #

现在可以通过Class选择器选中所有目标元素，然后遍历获取每个的data-value：

方案1：把所有值拼接后写入 #

如果你想把所有值用分隔符（比如逗号）连起来显示：

// 遍历所有.nota_imdb元素，提取data-value并转成数组
var allValues = $(".nota_imdb").map(function() {
  // 用data()方法比attr()更推荐，能自动转换数据类型（比如这里的数字会变成Number）
  return $(this).data("value");
}).get();

// 把数组转成逗号分隔的字符串，写入#imdb
$("#imdb").text(allValues.join(", "));

执行后#imdb的内容会是：18, 19, 20

方案2：逐个处理每个值 #

如果需要对每个值单独操作（比如逐个添加到页面）：

$(".nota_imdb").each(function() {
  var value = $(this).data("value");
  // 这里可以根据需求做任何操作，比如追加到#imdb
  $("#imdb").append("<span class='imdb-value'>" + value + "</span> ");
});

这样会给#imdb里添加三个分别显示18、19、20的<span>元素。

小提示 #

使用$(element).data("value")比attr("data-value")更靠谱：前者会自动解析data属性的类型（比如你的data-value是数字，它会返回Number类型），而后者只会返回字符串，后续处理更灵活。

内容的提问来源于stack exchange，提问作者Rdcstarr