jQuery循环渲染订单卡片时如何为每个头部<a>设置独立class并赋值

问题原因 #

你使用全局选择器$(".nmroPedido")匹配页面所有带对应类的元素，每次循环都会把新的codItem值添加到所有已生成卡片的头部标签class中，而非仅操作当前克隆出的新卡片内的对应元素。

解决方法 #

操作克隆生成的新卡片时，仅查找该卡片内部的目标元素即可，不要使用全局选择器。

核心修改代码 #

你只需要把原有代码里的：

$(".nmroPedido").addClass(`${pedidos.items[i].codItem}`);

修改为：

// 仅在当前克隆的新卡片内部查找.nmroPedido元素添加class
$(boxClonado).find(".nmroPedido").addClass(`${pedidos.items[i].codItem}`);

如果要给当前卡片的头部填充订单号，也可以用同样的逻辑实现：

$(boxClonado).find(".nmroPedido").text(`Nº do Pedido: ${pedidos.nroPedido}`);

额外优化建议 #

你当前的模板内部还有多个重复的id属性（比如header、dataEntrega、nomeproduto等），克隆后页面会出现大量重复id，不符合HTML规范，也会导致选择器异常。后续可以把模板里的id都换成类，或者克隆后也移除内部元素的id属性，全部用find方法配合类选择器操作当前卡片内部元素即可。

内容的提问来源于stack exchange，提问作者Lucas.ngr