jQuery - 重复 ID 的选择器答案

【问题标题】：jQuery - Selector for duplicate ID'sjQuery - 重复 ID 的选择器
【发布时间】：2011-07-27 19:58:58
【问题描述】：

我有一个表单元素的 ID 重复的页面。问题是元素基于切换单独显示。所以两个 ID 永远不会同时出现。

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

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

我尝试了以下方法，但无济于事：

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

【问题讨论】：

你试过not()吗？ $('#my_element').not(':hidden').val(); 另外，您是否有理由不能使用类名而不是 ID，因为从技术上讲，ID 用于页面上从不重复的单个元素？
jQuery: rename duplicate id 的可能重复项

标签： javascript jquery

【解决方案1】：

正如关于这个前提的无数其他问题会告诉你的那样，在这种情况下你不能使用 ID 选择器#；您必须使用 $('div[id=foo]') 之类的东西才能找到它。

【讨论】：

这非常有效。我知道使用重复 ID 是无效的，但是另一个元素是 display:none 基于切换。感谢您的回答！
“完美运行”听起来像是在一个版本的一个浏览器中运行，或者在所有或某些现有版本中可能在多个浏览器中运行。如果只有一个可见，规范不允许重复，你不能有重复。像这样的黑客是个坏主意。如果没有别的，它们会导致网站损坏，浏览器臃肿而缓慢，可以解决所有损坏的代码世界。不要成为那个人。
@Mike，我完全同意......但是，有时需要进行黑客攻击才能满足业务需求。我正在使用分析标签管理器将脚本覆盖在我无法控制的代码的网站之上，这严重违反了不重复 ids 规则 - 更糟糕的是，他们没有使用任何类，没有其他使用 jQuery 正确选择元素组的方法。关于有效的 hack 的文档仍然对社区有益且有用；你真的永远不知道黑客的所有可能的有效用例。我没有赞成这个答案，因为 OP 应该使用符合 HTML 的解决方案。
使用这样的选择器是否会降低性能？我会假设使用 #foo 会更快，但会快很多吗？
这种语法不会得到你想要的，因为它只选择一件事。这个问题是关于具有相同 ID 的多个项目。虽然，理想情况下，您应该避免重复 ID 并使用 #id 选择器。

【解决方案2】：

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

【讨论】：

可见与否，当 DOM 中存在重复 ID 时，您违反了规范并导致问题。相反，使用类名或其他属性来识别和使用您的元素。在您的情况下继续使用 ID 的唯一符合规范的方法是实际删除一个节点，然后将另一个节点放入 DOM 中，以便一次只存在一个。

【解决方案3】：

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

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

由于您使用的是 jQuery，因此我强烈建议您为此使用类。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

那你就可以了

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

【讨论】：

【解决方案6】：

试试: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 的元素被认为是可见的，

【讨论】：

即使这适用于一种情况/浏览器/版本，我认为这是一个坏主意，并且可能会在未来或其他浏览器中中断。您正在冒险进入标准中未定义行为的领域。

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

对于输入元素：

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

或者对于一个 div 元素：

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

【讨论】：

【解决方案9】：

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

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

【讨论】：