jQuery查找父表单


219

我有这个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"]?(当我单击提交按钮时,我想选择表格并在其中添加一些字段)

Answers:


484

我建议使用closest,它选择最接近的匹配父元素:

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

我不用按名称过滤,而是这样做:

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

2
也许我们应该按索引添加获取?'$(“ input [type = submit]”)。closest(“ form”);' 返回表单数组。
sergzach 2012年

我试图以这种方式使用上面的方法:$(“。each img”)。click(function(){$(this).closest(“ form”)。show();}); 但我似乎无法使其正常工作。:/
Alisso 2012年

2
peterjwest的答案比这个更好。
gagarine

在HTML5中,有一个新的“表单”属性,该属性使您可以将元素置于父表单之外。应该先检查一下。
mcintyre321 2015年

56

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

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

2
您提到IE8。这对版本6、7和9也有效吗?
桑尼

1
正如@peterjwest所说的那样,这会更好,更快。关于IE6,我认为输入元素上的.form位于IE4上,不幸的是netscape开发页面现在已经消失了……谁来检查mozilla。
MaciejŁopaciński2013年

这是一个更安全的方式,而不是使用closest(),因为输入可能有自己的形式分配:codepen.io/anon/pen/vNqEyg
Möhre

您可能使用了简写形式(如果表示法)来使代码简短,但是在此示例中,它只会分散您想要显示的实际代码的注意力(特别是对于不熟悉速记的人)。我赞成使用常规的if()。
AeonOfTime 2015年

我想说这种解决方案太混乱了。如果您使用此方法(我的解决方案是-以下是一个广告:)):stackoverflow.com/a/18921404/261332,那么您就不需要这种复杂性,因为它可以在预期的情况下起作用。否则不做任何事情。
userfuser

17

对我来说,这看起来最简单/最快:

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

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.