同ID多文本字段追加及新增文本域位置异常技术求助

嘿，我来帮你搞定这两个表单字段的问题：

问题1：把文本内容追加到多个同类型字段末尾 #

先给你提个重要的小提醒：HTML里同一个页面不能有多个相同ID的元素，这是不符合规范的，会让选择器逻辑混乱。所以建议你把目标文本域的id换成class，比如统一用branch-input作为类名。

接下来用jQuery实现追加功能很简单，比如你有一个输入框用来输入要追加的内容，点击按钮就把内容加到所有目标字段末尾：

// 假设触发追加的按钮是#append-btn，输入内容的框是#content-to-append
$('#append-btn').click(function() {
  const content = $('#content-to-append').val();
  // 遍历所有目标文本域，把内容追加到现有值后面
  $('.branch-input').each(function() {
    $(this).val($(this).val() + content);
  });
});

问题2：新增空白文本域到最后一个字段后面 #

你说用last()没生效，大概率是选择器没写对——比如你可能直接选了父容器的last()，但那只会选中父容器本身，不是里面的子字段。

先看你的现有结构，父容器是#branch，里面的文本域应该都有统一的类名（比如还是branch-input），那正确的做法是找到#branch里最后一个branch-input，然后在它后面插入新元素：

示例结构 #

<div class="form-group m-form__group" id="branch">
  <label>分支信息</label>
  <input type="text" class="form-control branch-input" placeholder="输入分支">
  <input type="text" class="form-control branch-input" placeholder="输入分支">
  <input type="text" class="form-control branch-input" placeholder="输入分支">
</div>
<button id="add-new-input">新增文本域</button>

jQuery代码 #

$('#add-new-input').click(function() {
  // 创建新的文本域元素，和现有结构保持一致
  const newInput = $('<input type="text" class="form-control branch-input" placeholder="输入分支">');
  // 找到#branch里最后一个.branch-input，然后在它后面插入新元素
  $('#branch .branch-input:last').after(newInput);
});

这样点击按钮时，新的空白文本域就会出现在现有最后一个字段的后面，变成第4、第5个...

另外关于“添加记录后返回编辑”的需求，只要你在保存时收集所有.branch-input的值（比如用$('.branch-input').map()把值转成数组），编辑页面加载时再把这些值逐个填充到对应的字段里，同时保留新增按钮的功能，就能完美支持编辑啦。

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