无法将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
相关产品推荐
相关产品推荐

