如何选择jQuery动态创建的div类或ID？克隆模板生成元素场景咨询

刚好我之前做过一模一样的需求——用jQuery根据数据库返回的数据，克隆页面里的HTML模板生成手风琴菜单，还得给每个菜单加唯一ID、修改标题，比如你说的4个房间数据的场景完全适用。下面是具体的实现步骤和细节：

首先在页面中写好手风琴的基础HTML结构，把它设为隐藏状态，作为克隆的“原型”：

<!-- 手风琴模板，初始隐藏不显示 -->
<div class="accordion-template" style="display: none;">
  <div class="accordion-title">默认标题</div>
  <div class="accordion-body">
    <!-- 这里是内容区域，后续可以动态填充房间相关数据 -->
  </div>
</div>

<!-- 用来存放所有克隆后手风琴的容器 -->
<div class="list"></div>

假设我们从数据库拿到的房间数据是一个数组（比如后端接口返回的roomList），里面包含每个房间的唯一ID、标题等信息，然后循环这个数组来处理：

// 模拟从数据库获取的房间数据，比如4个房间的情况
const roomList = [
  { roomId: 101, roomName: "豪华海景大床房" },
  { roomId: 102, roomName: "商务双床房" },
  { roomId: 103, roomName: "家庭亲子套房" },
  { roomId: 104, roomName: "行政贵宾套房" }
];

// 遍历每个房间数据，生成对应的手风琴
roomList.forEach(room => {
  // 克隆模板：传true是为了连模板上绑定的事件（比如手风琴展开收起）一起克隆
  const newAccordion = $(".accordion-template").clone(true);
  
  // 移除模板的标识类，给当前手风琴设置唯一ID（用房间ID做标识更可靠）
  newAccordion.removeClass("accordion-template").attr("id", `room-accordion-${room.roomId}`);
  
  // 修改手风琴的标题文本
  newAccordion.find(".accordion-title").text(room.roomName);
  
  // 还可以根据需要填充内容区域，比如房间的详细信息
  newAccordion.find(".accordion-body").html(`
    <p>房间编号：${room.roomId}</p>
    <p>房间类型：${room.roomName}</p>
    <!-- 其他房间信息比如价格、设施等都可以在这里动态插入 -->
  `);
  
  // 把处理好的手风琴显示出来，然后追加到.list容器里
  newAccordion.show().appendTo(".list");
});

• 克隆事件的问题：如果你的手风琴模板上已经绑定了点击展开/收起的事件，一定要用clone(true)，不然克隆出来的新元素不会有交互效果；如果没有绑定事件，传false或者不传参数也可以。
• 唯一ID的命名：尽量用数据库里的唯一标识（比如房间ID）来生成ID，不要用循环的索引值，避免数据顺序变化或者重复渲染时出现ID冲突。
• 模板的隐藏方式：除了用display:none，也可以用HTML5的<template>标签，它本身就是用来存放不可见的内容模板的，克隆的时候需要用$("template").contents().clone()来获取里面的内容，语义化更好。

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