当有多个相同类型的输入元素时，如何引用特定范围内的输入元素？答案

【问题标题】：How to reference input elements within a specific scope when there are multiple input elements of same kind?当有多个相同类型的输入元素时，如何引用特定范围内的输入元素？
【发布时间】：2011-01-07 19:46:30
【问题描述】：

如何为特定范围内的输入元素选择数据？我多次使用相同的表单（类“foo-form”），并希望确保在提交的表单范围内获得隐藏输入的值。是否暗示范围“this”？如果不是，什么是在此范围内选择输入类“foo-text”的语法？请随时将我指向 jquery 文档中的示例 - 我找不到所需的内容。

$('.foo-form').submit(function() {
    // Store a reference to this form
    var $thisForm = $(this);

});


<form class="foo-form">
<input type="hidden" class="foo-text"/>
<input type="submit" class="button" />
</form>
<form class="foo-form">
<input type="hidden" class="foo-text"/>
<input type="submit" class="button" />
</form>
<form class="foo-form">
<input type="hidden" class="foo-text"/>
<input type="submit" class="button" /> // user clicks this submit button
</form>

【问题讨论】：

标签： jquery html css forms

【解决方案1】：

如果您想要当前表单中的所有隐藏输入元素，请执行以下操作：

$('.foo-form').submit(function() {
    var $hiddenInputs = $('input[type="hidden"]', this);
});

这将为您提供刚刚提交的表单中可能存在许多隐藏输入的列表。如果您想专门获得具有 foo-text 类的那个，那么我们可以做到这一点，并获得它的价值：

$('.foo-form').submit(function() {
    var hiddenValue = $('input.foo-text', this).val();
});

还请记住，如果您想阻止表单正常提交（导致页面更改），您必须在定义的回调函数结束时返回 false：

$('.foo-form').submit(function() {
    ...

    return false;
});

【讨论】：

【解决方案2】：

使用$(this) 选择器将适用于当前选择的类。因此，如果您要执行alert($('.foo-text', this).val());，您应该为您点击提交的特定表单获取隐藏输入类型的值。当然，隐藏的表单字段需要有一个值，你才能得到任何东西。

【讨论】：

【解决方案3】：

值得注意的是，虽然：

$('input[type="hidden"]',this);

有效，使用起来要快一些（因为the way jQuery implements context searching）：

$(this).find('input[type="hidden"]');

更不用说更简洁（虽然不一定，更高效）使用：

$(this).find('input:hidden');

:hidden pseudo-selector 的 jQuery API 文档。

【讨论】：