如何获取父元素下所有子元素的data-chartid属性值？

HTML示例代码 #

<div id="chart-container">
  <div data-chartid="1">...</div>
  <div data-chartid="2">...</div>
  <div data-chartid="3">...</div>
</div>

你尝试使用代码 $('#chart-container').children().map(c => $(c).data('chartid')) 实现需求，但这个写法存在问题。

注：所有顶级子元素均为<div>标签，可修改选择器省去children()方法。

正确实现方案 #

方案1：jQuery优化写法 #

你的原代码核心问题是jQuery的map()方法返回的是jQuery对象而非原生数组，需要调用get()转换。同时可以直接通过选择器定位目标元素，省去children()：

// 精准选择父元素下带data-chartid的直接子div
const chartIds = $('#chart-container > div[data-chartid]').map(function() {
  return $(this).data('chartid');
}).get();

如果想用箭头函数，注意jQuery的map()回调参数顺序是(索引, 元素)，所以需要用占位符跳过索引：

const chartIds = $('#chart-container > div[data-chartid]').map((_, el) => $(el).data('chartid')).get();

方案2：原生JavaScript实现 #

不依赖jQuery的话，原生JS同样可以高效实现：

const container = document.getElementById('chart-container');
const chartElements = container.querySelectorAll('div[data-chartid]');
const chartIds = Array.from(chartElements).map(el => el.dataset.chartid);

或者一步到位的简洁写法：

const chartIds = Array.from(document.querySelectorAll('#chart-container > div[data-chartid]')).map(el => el.dataset.chartid);

关键注意点 #

• jQuery的map()返回类数组对象，必须用get()转为标准数组才能直接使用。
• 使用子元素选择器>可以避免选中父元素深层嵌套的子元素，保证只获取顶级子元素。
• 原生JS的dataset.chartid等价于getAttribute('data-chartid')，写法更简洁直观。

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