如何用jQuery查找ID以m开头的a标签并获取下一个缺失编号

嘿，这个需求我之前也碰到过，咱们可以把整个流程简化不少，不用先手动收集所有ID再单独处理。下面分享几种更简洁高效的实现方式：

方法一：直接提取编号找缺失值 #

我们可以借助jQuery的map()方法，在遍历元素的同时就把ID里的数字提取出来转成数字数组，接着从1开始找第一个不在数组里的数字，最后拼接成目标ID格式：

// 提取所有m开头a标签的数字部分，转为数字数组
const existingNumbers = $("a[id^=m]").map(function() {
  return parseInt(this.id.replace('m', ''), 10);
}).get();

// 从1开始查找第一个缺失的数字
let nextNum = 1;
while (existingNumbers.includes(nextNum)) {
  nextNum++;
}

const nextId = `m${nextNum}`;
console.log(nextId); // 示例场景下会输出 m4

这个写法省去了手动创建数组并push的步骤，直接一步得到我们需要的数字集合，逻辑更连贯。

方法二：用Set优化查找效率（适合大量元素场景） #

如果页面上这类a标签数量较多，数组的includes()查找会是O(n)的时间复杂度，换成Set的has()方法（O(1)）会更高效：

const existingSet = new Set(
  $("a[id^=m]").map(function() {
    return parseInt(this.id.slice(1), 10); // 用slice(1)替代replace，提取数字更高效
  }).get()
);

let nextNum = 1;
while (existingSet.has(nextNum)) {
  nextNum++;
}

const nextId = `m${nextNum}`;

Set的查找性能优势在元素数量多的时候会很明显，能减少不必要的遍历开销。

扩展：封装函数支持多次获取下一个编号 #

如果之后需要持续获取下一个缺失编号（比如拿到m4后要m5、m6，直到m7之后的m8），可以把逻辑封装成一个函数，每次调用都会实时读取页面最新的元素状态：

function getNextMissingMId() {
  const existingSet = new Set(
    $("a[id^=m]").map(function() {
      return parseInt(this.id.slice(1), 10);
    }).get()
  );
  
  let nextNum = 1;
  while (existingSet.has(nextNum)) {
    nextNum++;
  }
  
  return `m${nextNum}`;
}

// 第一次调用返回 m4
console.log(getNextMissingMId());
// 当页面新增m4后，再次调用会返回 m5，以此类推

这样每次调用都能拿到当前页面中缺失的最小m开头ID，灵活适配后续的新增操作。

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