Question

我有一个页面，其中包含表单元素的重复ID。问题是我根据切换单独显示元素。所以这两个ID都不会同时出现。

然而，当我对该元素进行表单验证时，它总是选择代码中最后显示的元素（即使它是隐藏的）。

是否有选择器来选择可见的重复ID？

我尝试过以下但无济于事：

$('#my_element:visible').val();

Answer 1

由于关于此前提的无数其他问题将告诉您，在这种情况下您不能使用ID选择器#;你必须使用$('div[id=foo]')之类的东西来找到它。

Answer 2

重复的ID是无效的HTML，几乎总是会导致脚本问题。尽可能避免。

Answer 3

您必须以使用唯一ID的方式重新设计表单。你会省去很多麻烦。

Answer 4

发生这种情况的原因是重复ID。对于HTML，ID必须是唯一的才能被视为有效。每当您不使用有效的HTML时，您的结果通常都不稳定。

在这种情况下，即使您一次只显示其中一个表单，它们仍然存在于标记中，这就是为什么代码中的最后一个始终是正在运行的表单。

由于您正在使用jQuery，我强烈建议您使用类。

Answer 5

您不应该有重复的ID，即使其中一个ID始终是隐藏的。找一些其他方法来做你想要的（类名？）。

Answer 6

避免在页面上重复ID。它不是有效的HTML。

Answer 7

不要对多个元素使用相同的id，类更好！

Answer 8

如Rwwl所说，重复的ID无效。为他们分配类而不是id。

然后你可以做

alert($('.my_element:visible').val());

Answer 9

尝试:hidden

   $("#my_element").find(":hidden").val();

由于以下几个原因，可以将元素视为隐藏：

They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.

注意： visibility: hidden或opacity: 0的元素被视为可见，

Answer 10

您不能仅使用 # id 选择器指定，您需要更具体。一种方法是先选择元素类型，然后选择 id：

对于输入元素：

$('input#my_element:visible').val();

或者对于 div 元素：

$('div#my_element:visible').val();

Answer 11

使用 jQuery 选择元素然后直接从元素中获取值的另一种解决方案：

$('#my_element:visible')[0].value

jQuery - 重复ID的选择器

11 个答案: