You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

无法将submit按钮追加至最近form的技术问题求助

解决将提交按钮追加到对应表单的问题

你遇到的问题根源在于选择器用错了——closest('form')是从当前元素向上遍历父级DOM节点来查找匹配的元素,但你的提交按钮和目标表单是同级兄弟关系,而且按钮在表单的后面,所以这个方法根本找不到对应的表单。

针对你的HTML结构(每个提交按钮紧跟在对应的表单之后),可以用prev('form')来定位到前一个同级的表单元素,然后把按钮追加进去。

正确的jQuery代码

jQuery("input[type='submit']").each(function () {
  $(this).prev('form').append(this);
});

为什么原来的代码无效?

你之前尝试的代码:

jQuery("input[type='submit']").each(function () { $(this).closest('form').append(this); });

closest()方法的作用是向上查找最近的父级匹配元素,而你的提交按钮并不是任何表单的子元素,所以$(this).closest('form')会返回一个空的jQuery对象,自然无法执行追加操作。

你的示例HTML结构

<form>
  <ol type="a">
    <li><input type="radio" name="ACTION" value="accept"> Yes</li>
    <li><input type="radio" name="ACTION" value="counter_proposal"> No</li>
    <li><input type="radio" name="ACTION" value="reject"> Reject</li>
  </ol>
</form>
<input type="submit" value="Respond To Trade Offer" id="trade_button1">

<form>
  <ol type="a">
    <li><input type="radio" name="ACTION" value="accept"> Yes</li>
    <li><input type="radio" name="ACTION" value="counter_proposal"> No</li>
    <li><input type="radio" name="ACTION" value="reject"> Reject</li>
  </ol>
</form>
<input type="submit" value="Respond To Trade Offer" id="trade_button2">

<form>
  <ol type="a">
    <li><input type="radio" name="ACTION" value="accept"> Yes</li>
    <li><input type="radio" name="ACTION" value="counter_proposal"> No</li>
    <li><input type="radio" name="ACTION" value="reject"> Reject</li>
  </ol>
</form>
<input type="submit" value="Respond To Trade Offer" id="trade_button3">

<form>
  <ol type="a">
    <li><input type="radio" name="ACTION" value="accept"> Yes</li>
    <li><input type="radio" name="ACTION" value="counter_proposal"> No</li>
    <li><input type="radio" name="ACTION" value="reject"> Reject</li>
  </ol>
</form>
<input type="submit" value="Respond To Trade Offer" id="trade_button4">

如果之后你的HTML结构有变化(比如按钮和表单之间有其他同级元素),可以改用prevUntil('form').prev('form')来跳过中间元素,精准定位到前一个表单:

jQuery("input[type='submit']").each(function () {
  $(this).prevUntil('form').prev('form').append(this);
});

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 07:07:38