如何将每个submit按钮追加到对应的前置trades-form表单？

嘿，我明白你的困扰了！你之前的代码之所以会让每个表单出现多个提交按钮，是因为$('.trades-form')会选中页面上所有类名为trades-form的表单，每遍历一个提交按钮，就把它追加到所有表单里——这样循环下来，每个表单自然会累积所有的提交按钮。

优雅的解决方案 #

根据你提供的示例结构（提交按钮和对应表单在同一个表格行<tr>内），我们可以通过限定查找范围来精准匹配每个按钮对应的表单：

$('input[type="submit"]').each(function() {
  // 找到当前按钮所在的表格行
  const $currentRow = $(this).closest('tr');
  // 在当前行内找到对应的表单
  const $targetForm = $currentRow.find('.trades-form');
  // 将按钮移到目标表单中
  $(this).detach().appendTo($targetForm);
});

逻辑解释 #

1. closest('tr')：向上查找距离当前按钮最近的<tr>元素，确保我们只在这个按钮所属的表格行内操作；
2. find('.trades-form')：在找到的表格行里，精准定位到对应的表单，避免影响其他行的表单；
3. detach().appendTo()：把按钮从原来的位置移除（保留绑定的事件），然后追加到目标表单末尾。

这个方案不需要硬编码索引或者额外加类，完全根据DOM结构动态匹配，不管页面有多少个这样的表单和按钮，都能正确处理，非常灵活优雅。

适配其他结构的扩展 #

如果你的DOM结构不是表格行，而是其他容器（比如<div class="trade-item">），只需要把closest('tr')改成对应的容器选择器即可，比如：

const $currentContainer = $(this).closest('.trade-item');

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