jQuery查找父窗体答案

【问题标题】：jQuery find parent formjQuery查找父窗体
【发布时间】：2010-12-09 22:52:29
【问题描述】：

我有这个 html

<ul>
    <li><form action="#" name="formName"></li>
    <li><input type="text" name="someName" /></li>
    <li><input type="text" name="someOtherName" /></li>
    <li><input type="submit" name="submitButton" value="send"></li>
    <li></form></li>
</ul>

如何选择input[name="submitButton"] 所属的表单？（当我点击提交按钮时，我想选择表单并在其中附加一些字段）

【问题讨论】：

如果您只想添加字段并且您已经知道它们应该包含什么，您可以使用隐藏字段。

标签： jquery traversal

【解决方案1】：

我建议使用closest，它选择最匹配的父元素：

$('input[name="submitButton"]').closest("form");

我不会按名称过滤，而是这样做：

$('input[type=submit]').closest("form");

【讨论】：

我们应该添加按索引获取吗？ '$("input[type=submit]").closest("form");'返回一个表单数组。
我正在尝试以这种方式使用上述内容： $(".each img").click(function() { $(this).closest("form").show() ; });但我似乎无法让它工作。 ://
peterjwest 的答案比这个好。
在 HTML5 中，有一个新的 'form' 属性允许您将元素放在父表单之外。这应该首先检查。

【解决方案2】：

您可以使用所有输入中存在的表单引用，这比.closest() 快得多（在 Chrome 和 IE8 中快 5-10 倍）。也适用于 IE6 和 7。

var input = $('input[type=submit]');
var form = input.length > 0 ? $(input[0].form) : $();

【讨论】：

你提到了IE8。这是否也适用于版本 6、7 和 9？
正如@peterjwest 提到的，这更好更快。 Re IE6 我认为输入元素上的 .form 在 IE4 上，不幸的是 netscape 开发页面现在已经消失了......谁会检查 mozilla 一个。
这是一种比使用closest() 更安全的方法，因为输入可能有自己的表单分配：codepen.io/anon/pen/vNqEyg
你可能使用了 if 符号来保持你的代码简短，但在这个例子中它只会分散你想要显示的实际代码的注意力（特别是对于不熟悉速记的人）。我赞成使用常规的 if()。
我想说那个解决方案太混乱了。如果你用这个（我的解决方案在下面 - 是的，这是一个广告:)）：stackoverflow.com/a/18921404/261332，那么你不需要那种复杂性，因为它只会在它应该工作的时候工作，否则什么也不做。跨度>

【解决方案3】：

对我来说，这看起来是最简单/最快的：

$('form input[type=submit]').click(function() { // attach the listener to your button
   var yourWantedObjectIsHere = $(this.form);   // use the native JS object with `this`
});

【讨论】：

对我来说，使用$(this.form) 是最好的解决方案

【解决方案4】：

从 HTML5 浏览器开始，可以使用 inputElement.form - 属性的值必须是同一文档中 <form> 元素的 id。有关MDN 的更多信息。

【讨论】：

【解决方案5】：

另见jquery/js -- How do I select the parent form based on which submit button is clicked?

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});

【讨论】：