如何获取指定class元素的data-id并拼接为字符串（jQuery）

你的HTML结构 #

<div id="list">
   <div class="special" data-id="TZ2"></div>
   <div class="special" data-id="KJ1"></div>
   <div class="" data-id="LLT"></div>
   <div class="" data-id="UV3"></div>
   <div class="special" data-id="JQT"></div>
</div>

需求 #

获取所有class为special的div元素的data-id值，拼接成逗号分隔的字符串（如：TZ2,KJ1,JQT）。

你的代码错误点 #

1. each方法的使用误区：$("#list > div").each(...)执行后，返回的还是原jQuery对象（也就是选中的所有子div），不会收集你在循环里取的data-id值，所以myIDs是jQuery对象而不是你要的id集合。另外循环里的$(".special", this)完全多余——你已经在遍历#list的子div了，当前的this就是那个div，直接针对.special元素遍历就行。
2. data()方法的特性：jQuery对象调用data('id')时，只会返回第一个匹配元素的对应data值，所以myIDs.data('id')只能拿到第一个元素的TZ2。

正确代码写法 #

直接选中所有.special元素，用map方法收集每个元素的data-id，再转成数组后拼接成字符串：

var myIDsString = $("#list > div.special").map(function() {
  return $(this).data('id');
}).get().join(',');
// 结果就是 "TZ2,KJ1,JQT"

或者更简洁的原生属性获取（因为data-id是HTML属性，也可以直接用this.dataset.id）：

var myIDsString = $("#list > div.special").map(function() {
  return this.dataset.id;
}).get().join(',');

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