jQuery如何合并两个表格td过滤函数并满足指定元素排列要求

• 现有逻辑仅基于表格所有td的全局索引做区间筛选，没有对筛选出的a集合做所属行校验，天然无法保证a集合的元素全部位于同一行
• 直接用$.merge(a, b)拼接两个集合，不会自动去除重复元素，如果两个筛选区间存在重叠，合并结果会出现重复DOM节点
• 即便拼接顺序满足a在前b在后的要求，因为a集合本身是跨行列的散点元素，完全不符合同排展示的规则

不能直接合并，原因很明确：

• 原有过滤条件仅判断全局索引的数值大小，没有关联单元格的所属父行属性，即便把两个判断条件合并成return index >= number1 || index < number2，筛选出的元素依然是跨行列的散点集合，满足不了同排的核心要求
• 合并后的过滤逻辑无法控制元素的排序优先级，也没法排除重复节点，和实际需求差距很大

整体分三步调整逻辑，不需要重写全部原有筛选规则，只需要补全缺失的校验环节：

1. 修正a集合的筛选规则，强制增加同属一行的校验
   • 先按照原逻辑筛选出所有满足全局索引>= number1的候选元素
   • 定位第一个候选元素的所属<tr>作为固定目标行
   • 重新过滤a集合：要求元素同时满足「全局索引>=number1」「所属父行和目标行完全一致」，从规则层面保证a集合的所有元素都在同一行内
2. 对b集合做去重处理
   • 按照原逻辑筛选出全局索引< number2的元素
   • 从b集合中剔除已经存在于a集合内的重复元素，避免合并后出现重复节点
3. 按优先级拼接集合
   • 优先保证a集合的元素排在最前，再将去重后的b集合接在后面，这里用jQuery原生的add()方法替代无去重能力的$.merge()，拼接后的结果更稳定

对应的参考代码：

// 获取表格内所有单元格的基础集合
const $allTableTd = $('table td');
let $a, $b, $mergeResult;

// 构造满足同排要求的a集合
const $initialACandidate = $allTableTd.filter((idx) => idx >= number1);
if ($initialACandidate.length) {
  // 取a集合第一个候选元素的所属行作为固定目标行
  const targetTr = $initialACandidate.first()[0].parentElement;
  $a = $allTableTd.filter(function() {
    const currentTdIndex = $allTableTd.index(this);
    // 同时满足索引条件 + 同属目标行的要求
    return currentTdIndex >= number1 && this.parentElement === targetTr;
  });
} else {
  $a = $(); // 无匹配候选时返回空jQuery集合兜底
}

// 构造去重后的b集合
$b = $allTableTd.filter((idx) => idx < number2).not($a);

// 按a在前、b在后的顺序合并
$mergeResult = $a.add($b);

实现注意点 #

• 相比原生$.merge()，jQuery的.add()方法会自动对合并后的DOM节点做去重，避免集合内出现重复元素
• 如果需求中a集合的目标行是固定的指定行号，可以直接提前定义目标行的DOM对象，不用从候选元素中提取，逻辑会更可控
• 如果number1、number2是单元格在当前行内的相对索引而非全局索引，原有基于全局索引的判断逻辑本身就需要调整，直接在每一行的td范围内做索引判断，筛选出的a集合天然就在同一行内

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