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]"). найближчий ("form");' повертає масив форм.
серджач

Я намагаюся використовувати вищезазначене таким чином: $ (". Кожне зображення"). Click (функція () {$ (це) .closest ("форма"). Show ();}); Але я не можу, здається, змусити його працювати. : /
Аліссо

2
відповідь peterjwest краща за цю.
гагарин

У HTML5 є новий атрибут 'form', який дозволяє мати елемент поза батьківською формою. Це слід спочатку перевірити.
mcintyre321

56

Ви можете використовувати посилання на форму, яка існує на всіх входах, це набагато швидше, ніж .closest()(у 5-10 разів швидше в Chrome та IE8). Працює і на IE6 та 7.

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

2
Ви згадуєте IE8. Чи працює це також для версій 6, 7 та 9?
Сонні

1
Це набагато краще і швидше, як згадував @peterjwest. Re IE6 Я думаю, що .форма про вхідні елементи була на IE4, на жаль, тепер немає сторінки розробки netscape ... і хто перевірив би мозіла.
Maciej paopaciński

Це набагато безпечніший спосіб, ніж використання, closest()оскільки вхід може мати власне призначення форми: codepen.io/anon/pen/vNqEyg
Möhre

Ви, ймовірно, використовували стенографію, якщо нотація залишала свій код коротким, але в цьому прикладі він лише відволікається від фактичного коду, який ви хочете показати (особливо для людей, незнайомих зі скороченням). Я буду за те, щоб використовувати звичайний, якщо ().
AeonOfTime

Я б сказав, що з цим рішенням занадто багато занепокоєння. Якщо ви підете з цим (моє рішення нижче - так, це реклама :)): 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,

2

Як і для браузерів HTML5, можна використовувати inputElement.form- значення атрибута має бути ідентифікатором <form>елемента в одному документі. Більше інформації про MDN .


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.