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"]ですか?(送信ボタンをクリックすると、フォームを選択してその中にいくつかのフィールドを追加したい)

回答:


485

私はclosest、最も近い一致する親要素を選択するを使用することをお勧めします。

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

名前でフィルタリングする代わりに、私はこれを行います:

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

2
インデックスによる取得を追加する必要がありますか?'$( "input [type = submit]")。closest( "form");' フォームの配列を返します。
sergzach

上記をこのように使用しようとしています:$( "。each img")。click(function(){$(this).closest( "form")。show();}); しかし、私はそれを機能させることができないようです。:/
Alisso

2
peterjwestの回答はこれよりも優れています。
ガガリン2014

HTML5には、新しい「form」属性があり、親フォームの外側に要素を置くことができます。これを最初にチェックする必要があります。
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でも機能しますか?
Sonny

1
@peterjwestが述べたように、これははるかに優れて高速です。IE6について入力要素の.formはIE4にあったと思いますが、残念ながらnetscapeの開発ページはもうなくなっています...そして、誰がmozillaをチェックするでしょう。
MaciejŁopaciński2013

closest()入力には独自のフォーム割り当てがあるため、これは使用するよりもはるかに安全な方法です。codepen.io
anon

おそらく、コードを短くするために略記の場合は略記を使用していましたが、この例では、表示する実際のコードの邪魔になるだけです(特に、略記に慣れていない人にとって)。通常のif()を使用したいと思います。
AeonOfTime

その解決策には混乱が多すぎると思います。あなたがこれ(私の解決策-はいこれは広告です:)):stackoverflow.com/a/18921404/261332に行く場合、それは想定されているときにのみ機能するので、そのような複雑さは必要ありませんそれ以外は何もしません。
userfuser 2016

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


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.