javascript - 使用Array.prototype.map(callback，index)在模板文字中索引[data-attribute]？

可以说我有一个从提取到某些api返回的对象数组。
我目前正在创建这样的标记...

var cardMarkup = objects.map(cardBuilder).join("");

function cardBuilder(meeting){
  var template = `<div class="meeting">${meeting.organizer}</div>`
  return template
}

我想为每个在cardMarkup中构建和显示的卡片都提供一个增量索引。
所以我最终得到的DOM看起来像这样...

<div class="meeting" data-index = 0 >${meeting.organizer}</div>
<div class="meeting" data-index = 1 >${meeting.organizer}</div>
<div class="meeting" data-index = 2 >${meeting.organizer}</div>

我的观点是，以后我可以分别/特定地查询这些卡div，因为现在它们都具有相同的类名。也许这个问题需要一个单独的解决方案，我愿意接受所有建议！

最佳答案

查看map的文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

您将看到传递给回调的第二个参数是索引，因此您只需要引用它并将其用作数据属性即可。

function cardBuilder(meeting, index){
  var template = `<div class="meeting" data-index="${index}">${meeting.organizer}</div>`
  return template
}