jQuery：在表单内选择第一个子输入，但在类型：隐藏时不选择？

Posted 2023-03-05

【中文标题】jQuery：在表单内选择第一个子输入，但在类型：隐藏时不选择？

【英文标题】：jQuery: select first-child input inside form but not when type:hidden?

【发布时间】：2012-03-09 16:50:51

【问题描述】：

我有一个像这样保存不同表单对象的变量……$(formId)

每个表单都不同，因为要么有一个隐藏的输入字段作为第一个元素，要么第一个子元素是普通输入（type="text" 或其他）

我怎样才能始终选择第一个“正常”输入字段

$(formId).find("input:first-child:not[type='hidden']")

我认为它应该是这样的。因此，如果您想知道我需要这个做什么 - 我想将焦点设置到表单中的第一个输入字段，但如果第一个输入是隐藏的，我当然希望将其设置为下一个“可见”输入。

【参考方案1】：

:first-child 选择器选择 第一个子元素，不是 jQuery 集合中的第一个元素。 要选择集合的第一个元素，请使用 jQuery 的 :first 选择器。

:not 的实现也是错误的。:not[type='hidden'] 等于 :not()[type='hidden'] 等于 [type='hidden'] - 与你想要的相反。

---

这些是正确的选择器（它们是等效的）：

input:not([type=hidden]):first
input[type!=hidden]:first

【参考方案2】：

$(formId).find ('input:visible:first').focus();

【讨论】：

:visible 不等于 [type!="hidden"]。如果将style="display:none" 添加到输入元素，它不 :visible，但它确实 匹配[type!="hidden"]。

【参考方案3】：

在您的情况下使用 :hidden 选择器会起作用吗？

$(formId).find("input:first-child:not(:hidden)")

（不太确定我明白你的标记是什么样子的......）

【讨论】：

:first-child 选择器选择第一个子元素。要选择集合的第一个元素，请使用 jQuery 的 :first 选择器：input:not([type=hidden]):first。

@Rob W：这似乎很完美，看起来是正确的解决方案。如果您将其发布为答案，我会接受。