JQuery元素数组克隆遇cloneNode错误，如何实现后续操作？

需要克隆表格中指定索引的行，只能通过索引选择，无法使用通用类或属性一次性选中。当前实现代码如下：

const rows: JQuery<HTMLElement>[] = [];
for (let i = 0; i <= rowIndexes!.length - 1; i++) {
  const row = $(
    `tr[ng-reflect-data-row-index='${rowIndexes![i]}'`
  );
  rows.push(row);
}

尝试克隆数组时执行$(rows).clone()，出现错误：TypeError: e.cloneNode is not a function。请问如何将这些行克隆为可执行animate、wrapAll等操作的jQuery元素？

问题根源在于rows数组存储的是独立的jQuery对象，直接将数组传入$()时，jQuery会把这些对象当作普通DOM元素处理，而clone()方法需要作用在DOM元素或包含DOM元素的jQuery集合上，而非jQuery对象数组。

可以通过以下两种方式解决：

方式一：直接构建单个jQuery集合（推荐） #

无需将每行的jQuery对象存入数组，直接把所有选中的DOM元素合并到一个jQuery集合中：

let $rows = $(); // 初始化空jQuery集合
rowIndexes!.forEach(index => {
  $rows = $rows.add(`tr[ng-reflect-data-row-index='${index}']`);
});
// 克隆整个集合
const $clonedRows = $rows.clone();
// 正常调用jQuery方法
$clonedRows.wrapAll('<div class="cloned-group"></div>').animate({opacity: 0.7}, 600);

方式二：处理现有数组并合并为jQuery集合 #

如果必须保留原rows数组，可提取数组中每个jQuery对象对应的DOM元素，再构建为新的jQuery集合：

// 提取所有DOM元素到数组
const domElements = rows.map($row => $row.get(0));
// 转为jQuery集合并克隆
const $clonedRows = $(domElements).clone();
// 执行后续操作
$clonedRows.animate({marginTop: '10px'}, 400);

核心逻辑是确保克隆的是DOM元素的集合，而非jQuery对象的数组。只有基于DOM元素构建的jQuery实例，才能正常调用clone()、animate()、wrapAll()等方法。

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