如何在jQuery中为input元素的id属性追加额外字符串？

我懂你的困扰——本来以为给现有id加个后缀很简单，结果写的代码直接把原来的id替换掉了对吧？这是因为你用的attr('id', 新值)是直接覆盖原有属性值的操作，要实现追加，得先拿到原来的id再拼接新内容才行。

这里给你两种可行的方案：

方案一：使用jQuery的attr()函数式写法 #

jQuery的attr()方法支持传入一个回调函数，这个函数会自动拿到当前元素的原有id值，你只需要在它后面拼接想要的字符串就行：

$('input').attr('id', function(index, currentId) {
  // 只给已有id的元素追加，避免给无id元素生成无效id
  return currentId ? `${currentId}_${votingID}` : currentId;
});

这段代码里：

• index是当前元素在选中集合里的索引（这里我们用不上，但参数必须保留）
• currentId就是元素原来的id值
• 用模板字符串把原有id和_votingID拼接起来，返回后就会更新元素的id属性

方案二：原生JavaScript写法（不用jQuery） #

如果之后你不需要依赖jQuery，也可以用原生JS实现，逻辑更直观：

// 只选择带有id属性的input元素
document.querySelectorAll('input[id]').forEach(input => {
  input.id += `_${votingID}`;
});

这里querySelectorAll('input[id]')确保只处理已经有id的input，然后直接通过+=操作符给id属性追加后缀，和普通字符串拼接一样简单。

这样就能完美实现“在现有id基础上追加字符串”的需求啦，不会再替换掉原来的id~

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