Question

假设我有从一个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，因为现在它们都具有相同的类名。也许这个问题需要一个单独的解决方案，我对所有建议持开放态度！

Answer 1

查看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
}

使用Array.prototype.map（回调，索引）在模板文字中索引[data-attribute]？

1 个答案: